Guides
Guide
Overlay events and Twitch setup
How Twitch events reach widgets and what users must connect.
Steps
1
The user signs in and connects Twitch from Account.
2
The Twitch callback stores the broadcaster connection and automatically syncs EventSub subscriptions.
3
Twitch sends events to our platform webhook.
4
Our backend normalizes each EventSub notification into an overlay event for the channel room.
5
The overlay runtime polls events for that room and dispatches StreamElements-style `onEventReceived` payloads into each widget iframe.
Important notes
Users do not need to run their own Twitch bot.
Our platform must have the Twitch bot/EventSub configuration working server-side.
Users do need to connect Twitch and grant the required broadcaster scopes. Without that connection, chat/sub/follow/raid style events will not route to their overlay.
Imported StreamElements widgets keep using the same handler names. The important setup step is connecting Twitch to the account/channel used by the overlay.
Example
window.addEventListener("onEventReceived", function (obj) {
const { listener, event } = obj.detail;
if (listener === "subscriber-latest") {
showSubAlert(event.displayName || event.name);
}
});Event listener mapping
Twitch EventSub notifications are translated before they reach imported widgets.
channel.chat.message
message
channel.chat.notification
chat-notification
channel.follow
follower-latest
channel.subscribe
subscriber-latest
channel.subscription.gift
subscriber-latest
channel.subscription.message
subscriber-latest
channel.cheer
cheer-latest
channel.raid
raid-latest
channel.channel_points_custom_reward_redemption.add
redemption-latest
stream.online
stream-online
stream.offline
stream-offline
channel.poll.*
poll-begin / poll-progress / poll-end
channel.prediction.*
prediction-begin / prediction-progress / prediction-lock / prediction-end
channel.goal.*
goal-begin / goal-progress / goal-end
channel.hype_train.*
hype-train-begin / hype-train-progress / hype-train-end
channel.ad_break.begin
ad-break-begin
channel.shoutout.*
shoutout-create / shoutout-receive