# StreamElements (https://docs.pixl.lennox.zip/sdk/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.

<Steps>
<Step>Leg in pixl auf der Seite **API & SDK** einen Schlüssel an, z.B. „StreamElements“. Als Recht reicht **Events lesen**.</Step>
<Step>Öffne in StreamElements dein Overlay, füge über **+ → Static/Custom → Custom widget** ein Custom Widget hinzu und klick auf **Open Editor**.</Step>
<Step>Trag in die Tabs **HTML**, **CSS**, **JS** und **Fields** den Code von unten ein.</Step>
<Step>Schließ den Editor und füge in den Widget-Einstellungen links deinen Schlüssel ins Feld **pixl API-Schlüssel** ein.</Step>
</Steps>

## HTML [#html]

```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 [#css]

```css
.counter {
  font-family: sans-serif;
  font-size: 36px;
  color: white;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
```

## JS [#js]

StreamElements ruft `onWidgetLoad` auf, sobald das Widget bereit ist. Dort stehen auch die Werte aus den Fields.

```js
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 [#fields]

```json
{
  "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 [#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. `tier` bei Subs), steht in der [Event-Referenz](/sdk/events#event-referenz).
- Wie `feed()` Historie und Live-Events zusammenführt, steht unter [Historie + live](/sdk/feed).
- Für Alerts auf einzelne Events nutzt du `pixl.on('twitch.cheer', …)`, siehe [SDK-Referenz](/sdk/reference#events).