Events
Auf Twitch-Events reagieren
Custom Widgets registrieren Event-Handler mit overlay.on(). Sobald auf deinem Twitch-Channel etwas passiert, ruft pixl deinen Handler mit den Event-Daten auf.
overlay.on('twitch.follow', (data) => {
showAlert(`${data.username} folgt jetzt!`);
});
overlay.on('twitch.cheer', (data) => {
showAlert(`${data.username} hat ${data.bits} Bits gecheert`);
});on() gibt die SDK-Instanz zurück, Handler lassen sich also verketten.
Event-Referenz
| Event | Daten | Auslöser |
|---|---|---|
twitch.follow | { username } | Neuer Follower |
twitch.sub | { username, tier } | Neuer Sub oder Resub |
twitch.cheer | { username, bits } | Bits gecheert |
twitch.raid | { from, viewerCount } | Eingehender Raid |
twitch.channel_point | { username, reward, input } | Channel-Point-Belohnung eingelöst |
stream.online | { streamId } | Stream ist live gegangen |
Mehr Events geplant
Weitere Events (z.B. Chat-Nachrichten und Spotify-Track-Wechsel) sind in Arbeit. Die Referenz wird laufend erweitert.
Beispiel: Alert mit Sound
const overlay = new Pixl({
token: '__TOKEN__',
settings: {
sound: { type: 'file', label: 'Alert-Sound', accept: 'audio/*' },
},
});
overlay.on('twitch.raid', (data) => {
document.querySelector('#alert').textContent =
`${data.from} raidet mit ${data.viewerCount} Leuten!`;
new Audio(overlay.settings.sound).play();
});Für Werte, die sich merken sollen (Counter, Ziele), nutzt du statt Events den State.
Konfiguration
Settings definieren, das Dashboard baut das Formular
State
Persistente Werte über Streams hinweg
© 2026 pixl