Adding an Overlay to OBS.Live

Copy your overlay's URL from the StreamElements website

Your overlay's URL can be found in the following ways:

My Overlays > Click on the relevant overlay's settings button and 'Copy URL'
In the Editor itself (by choosing 'Edit' instead) > Copy to clipboard using the top right chain icon

Create a Browser source in OBS

In the Sources panel in OBS, press the + button in the bottom left and choose Browser.

A new window will appear, prompting you to either create a new Browser source or use an existing one. In this case, we'll create a new one.

Set up Browser source properties

Once your new Browser source is created, the Properties window for the Browser source will automatically open. The following options should be set in order for the overlay to work correctly:

URL: Paste the overlay URL you obtained in the first step of this guide here.

Width: 1920, unless you've changed the browser source's resolution yourself.

Height: 1080, unless you've changed the browser source's resolution yourself.

FPS: 30 or 60 depending on your current stream settings and computer's capabilities.

Custom CSS: Should be empty.

Shutdown source when not visible: Should be checked if your overlay has a widget that generates sound especially (In reference to a Media Request known issue - having the MR widget in an overlay that is not set to 'Shutdown when not visible' - a different scene for example - may lead to an issue of echo or double sound being played, originating from both MR widgets - from the active and non-active scenes).

In general, it's a good idea to check Shutdown source when not visible to reduce the load on your computer, although this will also result in a slight delay in the overlay loading when switching between sources. A workaround to avoid this delay is to use Studio Mode to preload scenes before transitioning.

If you have any questions, join our Discord server for 24/7 support: discord.gg/se