How to Add a StreamElements Overlay to OBS Studio
How Do You Put a StreamElements Overlay Into OBS?
You have your overlay looking exactly how you want it in StreamElements, but when you open OBS Studio, it is nowhere to be found. How do you actually get that overlay onto your stream?
You do not need to rebuild it inside OBS or download the whole design as a picture. A StreamElements overlay is loaded into OBS as a Browser Source. That is how your on-screen frame, labels, chat widgets, and other overlay elements can appear in the scene.
Once you have saved the overlay in StreamElements, the process is straightforward: get its link, create a Browser Source in OBS, and make sure it fits and sits in the right layer.
How to Add a StreamElements Overlay to OBS Studio
Start with an existing overlay in your StreamElements account. If you have not created one yet, make and save it in the Overlay Editor first.
Sign in to StreamElements, open Streaming Tools, and select Overlays.
Find your saved overlay, select its three-dot menu, and choose Copy URL. You can also copy the link using the link icon inside the Overlay Editor.
Open OBS Studio and select the scene where the overlay belongs.
In the Sources dock, click + and select Browser, then Create New.
Name it something recognizable, such as Gameplay Overlay, and click OK.
Paste the StreamElements link into the URL field.
Set Width and Height to match your overlay, then click OK. Your overlay should appear in the OBS preview.
What Size Should Your StreamElements Overlay Be in OBS?
If you built a standard 1080p overlay, set the Browser Source to 1920 pixels wide and 1080 pixels high. Those are the dimensions StreamElements recommends for a typical full-screen overlay.
If you designed the overlay for another resolution, use that size instead. A mismatch can make an overlay appear cropped, stretched, or positioned strangely.
You can drag or resize the source in the OBS preview, but starting with matching dimensions avoids unnecessary adjustments.
Why Is My StreamElements Overlay Not Showing in OBS?
First, check the Sources list. A Browser Source can load correctly and still be invisible because another source is covering it. Drag the overlay higher in the list when it contains graphics meant to sit above your gameplay or camera.
Next, open the Browser Source properties and confirm you pasted the correct StreamElements overlay URL. Make sure the eye icon is enabled and check that the width and height match the overlay.
If it is still blank or frozen, StreamElements recommends testing the Browser Source hardware acceleration setting in OBS under Settings → Advanced. Change it, restart OBS if required, and test again. Those are troubleshooting steps, not part of the basic installation.
Do You Have to Add the Overlay Again Every Time You Edit It?
Usually, no. If you edit the same saved overlay in StreamElements, the existing Browser Source link continues pointing to it. Save your changes in StreamElements and refresh the OBS source if the preview does not update.
But if you create an entirely different overlay, such as a Starting Soon scene and a separate gameplay overlay, those are different saved overlays with their own URLs.
Giving each overlay and Browser Source a recognizable name makes it easier to keep track of which design belongs in which scene.
Can You Add Your Own PNG Overlay to OBS Instead?
Yes. This is a useful distinction if you bought a webcam frame or made your own artwork in Canva or Photoshop. A static PNG image does not need a StreamElements link at all. In OBS, add an Image source and select the saved PNG file.
Use the StreamElements Browser Source method when the overlay is hosted in StreamElements, especially when it contains widgets or elements that update dynamically.
If your main goal is setting up follower alerts rather than adding an entire overlay, see our separate StreamElements alerts tutorial below.
Where Can You Find StreamElements’ Official Overlay Instructions?
StreamElements documents the URL and Browser Source workflow in its official guide:
You May Also Like
Recommended Gear: VSD M18 Macro Pad Programmable Keypad
With your overlay set up in OBS, a programmable keypad is a convenient way to trigger your usual scene and stream controls.
Take a closer look at the VSD M18 Macro Pad Programmable Keypad and see whether it fits your setup.
This post contains affiliate links. I may earn a commission from purchases made through these links.
Comments