One of the most important and creative things new streamers like to bring into their stream, is the unique additon of overlays. StreamElements offers both static and animated overlays for you to utilize for your stream. In this article we will over how you can add any StreamElements overlay into an OBS scene.
Where to start with adding your overlay to OBS:
The first thing you will need to do is grab the overlay that you are wanting to insert into OBS by copying the overlay's URL.
You can do this a few different ways:
Option 1: From your dashboard
Step 1: Navigate to 'Streaming Tools' --> 'Overlays'
Step 2: Select the overlay you want to copy and click on the kebab menu (the 3 dots in the bottom left of your selected overlay as shown below)
Step 3: Select, 'Copy URL'
Now you're ready to paste this URL into OBS, feel free to move down to that section below if you're ready.
Option 1: From your overlay editor
If you're already in your overlay editor, you can easily find the option to copy your url to paste into OBS.
Just hover over the chain icon in the top right section of your overlay editor and right-click to copy to your clipboard.
As shown here:
Now you're ready to paste this URL into OBS, feel free to move down to that section below if you're ready.
For the next step in this process you will need to move over to OBS.
How to add your StreamElements overlay to OBS:
Step 1: Navigate to your Sources panel in OBS
Step 2: Select the + button in the bottom left and choose Browser
Step 3: Create a Browser source in OBS
A new window will then appear prompting you to either create a new source or add an existing source.
Step 4: Select 'Create new' to add a new browser source and click 'OK'
A new window will then appear prompting you to set up your browser source properties.
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.
A couple of items to note:
Shutdown source when not visible: Should be checked if your overlay has a widget that generates sound.
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.
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.