Skip to main content

Overlays: The Complete Guide (Gallery, OBS Setup, Widgets, Alerts & Data)

Updated

Creator_Tools.png

Purpose:
One of the most creative things streamers bring to their stream is a unique overlay. This guide covers everything about StreamElements overlays: browsing the Overlays Gallery and My Overlays, adding an overlay to OBS Studio, setting up a Super Theme and Alertbox, setting up the KappaGen emote widget, and managing the Widget Data behind it all.

Table of Contents

StreamElements provides a diverse selection of 'ready-to-go' overlays and overlay packages for seamless integration into your stream. These overlays come pre-configured with widgets and alerts, requiring no setup.

To explore available themes, click the Themes Gallery. To add an overlay to your stream, click 'CREATE' on your chosen asset, optionally name it, and then click 'GO TO MY OVERLAYS'. The asset will be instantly available in your 'My Overlays' section.

Please note that your overlay tokens are sensitive information — don't share the overlay URL publicly.

The same process applies when adding alerts and widgets to your setup. However, when creating these, you'll need to decide whether to add them to an existing overlay or create a new one.

My Overlays — StreamElements' Overlay Manager simplifies overlay creation and editing by storing overlays in the Cloud, saving CPU usage and enabling access from anywhere.

In addition to visual assets, you can display incoming event data on your stream using Labels — examples include 'recent subscriber' or 'recent follower', various goal widgets, chat widgets, and alerts triggered by stream store redemptions. For more on managing that data, see the Widget Data section below, or go directly to your Widget Data dashboard.

For a full walkthrough of initial setup and Super Themes, see our Quick-Start Guide.

Adding an Overlay to OBS Studio

StreamElements offers both static and animated overlays. Here's how to add any StreamElements overlay into an OBS scene.

Getting the Overlay URL

Option 1: From your dashboard

  1. Navigate to Streaming Tools > Overlays.
  2. Find the overlay you want to use and click the menu (the three dots in the bottom left of your selected overlay).
  3. Click "Copy URL".

Option 2: From the overlay editor

If you're already editing an overlay, hover over the link icon in the top-right section of your overlay editor and click to copy the URL to your clipboard.

Adding the Overlay to OBS

  • Navigate to your Sources panel in OBS.
  • Select the + button and choose Browser.
  • Select "Create new" to add a new browser source, name it (e.g. "Stream Overlay"), and click OK.
  • Set the following properties for the overlay to work correctly:
    • URL: Paste the overlay URL you copied above.
    • Width: 1920, unless you've changed the browser source resolution yourself.
    • Height: 1080, unless you've changed the browser source resolution yourself.
    • FPS: 30 or 60, depending on your stream settings and computer capabilities.
    • Custom CSS: Leave as default.
  • Click OK to save your changes.

You can repeat this process to use multiple overlays in OBS Studio, and the same steps apply on OBS for Mac.

Setting Up a Super Theme & Alertbox

Widgets in your overlay display information based on real-time events during your stream. For example, when a viewer follows you, the event is recorded, and the follower's name is updated in your widget data, which then reflects on your overlay.

Customizing Widget Appearance

You can customize widget appearances in the editor. Adjust labels by navigating to Activity Feed > Widget Data > Labels. Save your settings at the top right and reload your overlays from the Activity Feed.

Setting Up a Super Theme

  1. Navigate to the Themes Gallery: Choose a Super Theme you prefer.

  • Create Scenes: Each overlay should correspond to a different scene, though scenes can have multiple overlays (browser sources).
  • Edit Overlays: Access the overlay manager on the website and edit the new overlays as needed.

Working with Widgets

Widgets share some common settings but also have unique configurations depending on their type. For example, an alertbox has different settings compared to a label widget or a store redemption widget.

  • Expand Layers Dropdown: View all widgets in the overlay.
  • Rename Layers: Double-click a layer to change its name.
  • Outline and Position Layers: Selecting layers outlines their bounding boxes if not locked. Drag widgets to reposition them as desired.
  • Access Widget Settings: Select a widget and press 'Settings' below the layers dropdown.

Some alerts allow for creating variations.

Each alert variation must be edited individually based on its specific conditions. Make sure that:

  • You configure each variation's settings appropriately.
  • Conditions and chance percentages are logically set.
  • Variations have consistent configuration to avoid conflicts and ensure alerts play correctly.

Creating a Unified Alertbox

To use a single alertbox across all scenes:

  1. Create a New Overlay:

    • In the overlay manager, create a new overlay at 1080p resolution.
    • Name it 'alertbox' and save it.

  2. Duplicate the Alertbox:
    • Edit the overlay containing the original alertbox.
    • Select and duplicate the alertbox to the new 'alertbox' overlay, then save.

  3. Remove Duplicate Alertboxes:

    • Hide or delete the alertboxes in the original and other overlays to prevent duplicate audio.

Now, your scenes setup should look something like this:

Integrating the Alertbox into Scenes:

  1. Right-click the alertbox browser source and select 'Copy'.
  2. Switch to each scene and paste (CTRL+V) the browser source.

Explore the Themes Gallery to discover widgets and themes that complement your setup — default widgets like HypeCup, HypeBoss, and alertbox are straightforward to integrate.

Managing Alert Text Settings

Certain alert types allow viewer engagement through added messages, such as resubbing or donating. When configuring text settings:

  • Primary Text Settings: Adjust text related to the event itself.
  • Secondary Text Settings: Customize text related to the viewer's message.
  • Advanced Settings: Fine-tune these settings to achieve the desired visual outcome.

Especially for alert variations, thoroughly review text settings across all alerts to maintain consistency and the desired appearance.

Emote Explosion Widget (KappaGen)

KappaGen displays chat emotes on your stream, either as 'Emotesplosions' or through the !kappagen command.

Setting Up KappaGen

  1. Navigate to Overlays — from your dashboard, go to 'Streaming Tools' and select 'Overlays'.

  2. Create a New Overlay — click on 'New Overlay'.

  3. Add the KappaGen Widget — in the overlay editor, select 'Add Widget', hover over 'Alerts', and select KappaGen.

General Settings

Above the tabs you'll find general options that affect both:

  • Bounding Box: Stretch the bounding box to cover the entire canvas by selecting and dragging the bottom right corner, so KappaGen shows across the whole screen.
  • Enable Seasonal Hats: Add seasonal hats, like Santa's hat.
  • Emote Size: Customize the size of emotes. Avoid very large sizes to prevent stream delays — experiment with sizes during a live stream to find the best fit.

Chat Emotes Setup

Chat Emotes display emotes from chat on screen with various animations. The Chat Emotes tab will show emotes or emote combos sent in chat.

  • Animation Option: select from 5 options for how emotes appear on your stream.
  • Combo mode: when emote combos (a chatbot module that must be enabled) are sent in chat, the widget will display them in the overlay.

You can also decide if emotes are enabled for everyone, or only subscribers' emotes will trigger the widget. Set the number of emotes per user per second and how long emotes stay on screen, then save the overlay and test in chat by sending emotes!

Adding Custom Emotes to KappaGen: press the cog wheel next to 'Custom Emotes'.
If the file is an animated gif, make sure the checkbox is ticked. If you're comfortable with regex and want a custom emote triggered by certain text patterns, tick that checkbox and set the regex — otherwise, type the exact text to match from chat.

Emotesplosions Setup

Emotesplosions flood your screen with emotes during events or when triggered by the !kappagen command.

  • Animation Option: Choose from 5 animation options for how emotes appear on stream.
  • Alert Types: Select events that will trigger Emotesplosions.
  • Emotes to Show: Choose the total number of emotes displayed.
  • Select Emotes: choose which emotes are enabled for Emotesplosions.

Tips:

  • For better control over visuals, consider adding the KappaGen widget to its own dedicated overlay.
  • If not all emotes are available, use !emotes update in chat and allow our system 24 hours to re-gather the data.

Widget Data

The Widget Data section of your account offers control over the information presented in various widgets used in overlays. This data is editable or removable — for example, correcting an inappropriate username.

Accessing Widget Data

On the Website: via the Widget Data button in the Activity Feed section, the Session Data tab at the top of the Overlay Editor, or directly via the StreamElements Dashboard.

In SE.Live: configure a custom dock to access the Widget Data page quickly:

  1. Navigate to View > Docks > Custom Browser Docks....
  2. Name the dock and use the dashboard link above as the URL.

Widget Data Sections

  • Labels: Controls information shown in Latest/Recent widgets — manually edit or remove usernames and amounts (Latest Data), or remove entries via the X next to each username (Recent Data).
  • Goals: Tracks progress for Follower, Subscriber, Tip, and Cheer goal widgets. Values update automatically, can be manually set or cleared, and don't reset between sessions.
  • Session Data: Shows session event counts (followers, subscribers, etc.) and session tops (tip, cheer, etc.) for the current session. Sessions reset 15 minutes after each stream unless manually reset.
  • Totals: Non-editable data straight from your connected channel — total followers, subscribers, cheers, and tips.
  • Aggregates: Compiles data across your account over time periods like the last 7 or 30 days. Not directly editable, but can be influenced by account adjustments.
  • Settings: Controls session resets and lets you choose relative (last 7/30 days) or calendar (last week/month) timing for widget aggregates.

FAQs

Q: Why are my overlays not appearing in OBS?
A: This could be caused by wrong browser source dimensions, hardware acceleration, and other factors. See Overlays Troubleshooting for additional steps.

Q: Can I use multiple overlays in OBS Studio?
A: Yes — repeat the "Adding an Overlay to OBS Studio" steps above for each overlay you want to add.

Q: Is this process the same for OBS on Mac?
A: Yes, the steps are the same across platforms.

Q: Can I move or resize overlays?
A: Yes — either in the overlay editor or from the OBS preview window.

Q: Why don't my overlays have sound?
A: See the Audio Issues section of our SE.Live Troubleshooting article to fix sound issues with your overlays.

Additional Resources

Related to

Related articles