StreamElements
Subs und Bits seit Stream-Start als StreamElements Custom Widget
So baust du in StreamElements ein Widget, das live zeigt, wie viele Subs und Bits seit Stream-Start reingekommen sind.
Leg in pixl auf der Seite API & SDK einen Schlüssel an, z.B. „StreamElements“. Als Recht reicht Events lesen.
Öffne in StreamElements dein Overlay, füge über + → Static/Custom → Custom widget ein Custom Widget hinzu und klick auf Open Editor.
Trag in die Tabs HTML, CSS, JS und Fields den Code von unten ein.
Schließ den Editor und füge in den Widget-Einstellungen links deinen Schlüssel ins Feld pixl API-Schlüssel ein.
HTML
<script src="https://pixl.lennox.zip/sdk/pixl.js"></script>
<div class="counter">
<div><span id="subs">0</span> Subs</div>
<div><span id="bits">0</span> Bits</div>
</div>CSS
.counter {
font-family: sans-serif;
font-size: 36px;
color: white;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}JS
StreamElements ruft onWidgetLoad auf, sobald das Widget bereit ist. Dort stehen auch die Werte aus den Fields.
window.addEventListener('onWidgetLoad', (obj) => {
const { pixlKey, since } = obj.detail.fieldData;
if (!pixlKey) return;
const pixl = new Pixl({ key: pixlKey });
let subs = 0;
let bits = 0;
pixl.feed(
{ since: since || 'stream', types: ['twitch.sub', 'twitch.sub_gift', 'twitch.cheer', 'twitch.power_up'] },
(data, event) => {
if (event.replay) return; // erneut abgespielte Events nicht mitzählen
if (event.event === 'twitch.sub') subs += 1;
if (event.event === 'twitch.sub_gift') subs += data.amount ?? 0;
if (event.event === 'twitch.cheer' || event.event === 'twitch.power_up') bits += data.bits ?? 0;
document.querySelector('#subs').textContent = subs;
document.querySelector('#bits').textContent = bits;
},
);
});Fields
{
"pixlKey": {
"type": "text",
"label": "pixl API-Schlüssel",
"value": ""
},
"since": {
"type": "text",
"label": "Zählen ab (leer = seit Stream-Start, sonst z.B. 2026-10-01)",
"value": ""
}
}Tipps
- Der Schlüssel steht im Field statt im Code. So kannst du den Code weitergeben, ohne den Schlüssel mitzuschicken.
- Was du zählst, bestimmst du selbst im Handler. Welche Felder die Events haben (z.B.
tierbei Subs), steht in der Event-Referenz. - Wie
feed()Historie und Live-Events zusammenführt, steht unter Historie + live. - Für Alerts auf einzelne Events nutzt du
pixl.on('twitch.cheer', …), siehe SDK-Referenz.
© 2026 pixl