Add an Overlay to Your Broadcast Software

Every StreamElements overlay is a web page. To show it on stream, add its URL as a browser source in your broadcast software.

Keep the URL private

An overlay URL contains a token that identifies your account. Don’t share it publicly or show it on stream — anyone with the URL can view (and on some pages, edit) your overlay.

Get the overlay URL

1. Go to My Overlays.

2. Open the overlay’s menu (the three dots) and select Copy URL.

   You can also copy it from inside the overlay editor, using the link icon in the top-right corner.

Add it to your broadcast software

OBS Studio

1. In the Sources panel, click + and select Browser.
2. Choose Create new, name it (for example “Stream Overlay”), and click OK.
3. Set these properties, then click OK:
   • URL: the overlay URL you copied above.
   • Width: 1920 (unless you changed your overlay’s resolution).
   • Height: 1080 (unless you changed your overlay’s resolution).
   • FPS: 30 or 60, depending on your stream settings.
   • Leave Custom CSS as default.

Repeat this for each overlay you want to use — the same steps work on OBS for Mac.

XSplit

Add the overlay as a Browser Source using the same URL, width, and height as above.

Overlays not showing up?

XSplit versions older than 4.5.2306.2701 use an outdated Chromium Embedded Framework (CEF) and can’t load current StreamElements overlays. Update XSplit to the latest version, or update its CEF package, to fix this — see Troubleshooting for links.

Using multiple overlays

You can add as many overlays as you like — repeat the steps above for each one. Give each scene its own overlay (or overlays), or reuse a single overlay across scenes for elements like a unified AlertBox — see AlertBox alert variations for that setup.

Related

• Troubleshooting: overlays not appearing, stuttering, or missing sound.
• AlertBox alert variations: customize what plays for follows, subs, tips, and more.