Overlays

Overlays are the visuals layered on top of your stream — alerts, labels, goals, chat — composed in the StreamElements Overlay Editor and rendered in your broadcast software via a single browser source. When the built-in widgets aren’t enough, you can code your own.

For streamers

Set up overlays, alerts, and widgets in the Overlay Editor — no coding required to get started.

Getting StartedCreate your first overlay and add an AlertBox or Custom Widget in the Overlay Editor.

Add to Your Broadcast SoftwareAdd an overlay URL to OBS or XSplit as a browser source.

AlertBox Alert VariationsCustomize alerts per event, create variations, and set up text-to-speech.

Add a Chat OverlayShow your stream chat on your overlay for fullscreen viewers.

KappaGenShow chat emotes on stream and trigger emote explosions.

Widget DataView and correct the data behind your labels, goals, and session widgets.

Custom Code in AlertboxesBuild fully custom alert designs with inline template variables for names, amounts, and messages.

TroubleshootingFix overlays not appearing, stuttering, or missing sound.

Editor ShortcutsKeyboard shortcuts for moving, duplicating, and grouping widgets in the Overlay Editor.

For developers

Build your own widgets with HTML, CSS, and JavaScript, react to stream events, and use the SE_API from your code.

Your First Custom WidgetStep-by-step tutorial: define fields, write HTML/CSS/JS, and react to a follow event.

Code EditorWrite HTML, CSS, JavaScript, and custom field definitions in the Custom Code Editor.

SE_API ReferenceUse the SE_API store, counters, queue control, and more from your custom widgets.

Widget EventsHandle onWidgetLoad, onEventReceived, and onSessionUpdate events in your widget code.

Session Data ReferenceSession data keys for followers, subscribers, tips, cheers, and more, available to widget code.