Brand Manager
Variablen in eigenen Widgets
Welche Live-Werte du direkt im HTML und CSS deines eigenen Widgets verwenden kannst – und wie sie sich zu deinen eigenen Feldern verhalten.
Aktualisiert am 24.09.2026
Ein eigenes Widget besteht aus HTML, CSS und JavaScript – und aus den Feldern, die du dir im Editor selbst anlegst. Zusätzlich kannst du Live-Werte deines Kanals direkt einsetzen, ohne dafür eine Zeile JavaScript zu schreiben.
So sieht das aus
Schreib den Platzhalter einfach dorthin, wo der Wert stehen soll:
<div class="titel">{streamTitle}</div>
<div class="spiel">Wir spielen {game}</div>
<div class="danke">Zuletzt gefolgt: {lastFollower}</div>
Das geht genauso im CSS:
.balken { width: calc({viewers} * 2px); }
Die Werte werden beim Anzeigen ersetzt und aktualisieren sich während des Streams von selbst.
Diese Platzhalter gibt es
| Platzhalter | Was drinsteht |
|---|---|
{streamTitle} |
Aktueller Stream-Titel |
{game} |
Aktuelle Kategorie bzw. Spiel |
{uptime} |
Wie lange der Stream schon läuft |
{viewers} |
Zuschauer gerade eben |
{peakViewers} |
Höchste Zuschauerzahl dieses Streams |
{followers} |
Follower gesamt |
{subs} |
Abonnenten gesamt |
{views} |
Kanal-Aufrufe gesamt |
{lastFollower} |
Zuletzt gefolgt |
{lastSub} |
Zuletzt abonniert |
{lastResub} |
Letztes Wieder-Abo |
{lastSubGifter} |
Wer zuletzt Abos verschenkt hat |
{lastBits} |
Letzte Bits (Name und Anzahl) |
{lastBitsName} |
Letzte Bits — nur der Name |
{lastBitsAmount} |
Letzte Bits — nur die Anzahl |
{lastRaid} |
Letzter Raid |
{channelName} |
Dein Twitch-Name |
{channelId} |
Deine Twitch-ID |
Die doppelte Schreibweise aus StreamElements funktioniert ebenfalls: {{game}} tut dasselbe wie {game}.
Deine eigenen Felder haben Vorrang
Legst du im Editor ein Feld an, das genauso heißt wie ein Platzhalter von oben, gewinnt dein Feld. So kann dir eine neue CitrusTools-Variable nie ein bestehendes Widget zerschießen.
Wenn ein Platzhalter unbekannt ist
Alles, was weder eines deiner Felder noch einer der Platzhalter oben ist, wird beim Anzeigen entfernt. Das ist Absicht – sonst stünde {{irgendwas}} im Stream.
Achte aber darauf, was das im CSS bedeutet: Aus background: {{blasenfarbe}}; wird dann background: ;, und der Browser wirft die ganze Zeile weg. Das Ergebnis ist ein durchsichtiges Element, bei dem man nicht sofort sieht, woran es liegt.
Damit du nicht suchen musst:
- Beim Import aus StreamElements bekommst du eine Meldung mit allen Namen, die wir nicht kennen.
- Im Browser-Log deiner Overlay-Quelle steht dieselbe Liste, sobald das Widget geladen wird.
Die Lösung ist in beiden Fällen dieselbe: Leg das fehlende Feld im Editor an, dann hat der Platzhalter wieder einen Wert.
Mit JavaScript
Brauchst du die Werte im Skript statt als Platzhalter, stehen sie unter window.__SE_BOOT.citrus:
const werte = window.__SE_BOOT.citrus;
document.querySelector('.titel').textContent = werte.streamTitle;
Dieselben Namen überall
Die Namen sind absichtlich dieselben wie im Lauftext-Element, im Textfeld und in Chat-Befehlen. Wer {game} im Ticker kennt, schreibt es im Widget genauso.
War dieser Artikel hilfreich?
Verwandte Artikel
Eigene Widgets von StreamElements übernehmen
Was beim Import mit deinen Platzhaltern passiert, welche Namen sich ändern und was sich nicht übertragen lässt.
Altes Overlay in den neuen Editor übernehmen (V2 → V3)
Übernimm deine älteren Overlays in den neuen Editor – dein Original bleibt erhalten.
Overlays von StreamElements importieren
Bring deine bestehenden StreamElements-Overlays mit einem Token zu CitrusTools.
Assets hochladen & verwalten (Brand Book)
Lade Bilder, Videos, Sounds und Schriften hoch – zentral in deinem Brand Book.