Add the overlay to OBS
Eranio Published on: 13. October 2026
Adding your overlay to OBS
This guide walks through adding an overlay from the Overlay Designer (or the Overlay Alerts system) as a browser source in OBS Studio. You'll find the required link on the matching overlay page under the Overlay menu.
Getting the link
- In the dashboard, open Overlay → Designer (Beta) and click Edit on the canvas you want, or open Overlay → Overlay Alerts if you use that older system instead.
- Click the eye icon next to "Overlay link" at the top to reveal the link.
- Click Copy to copy the link to your clipboard.
This link works like a password. Anyone who has it can send test events into your overlay through it. Don't share it publicly and don't post it in your chat.
Creating the browser source in OBS
- Open OBS Studio.
- In the "Sources" panel, click the plus icon and choose Browser (or Browser Source).
- Give the source a name, e.g. "Overlay", and confirm with OK.
- Paste the copied link into the URL field.
- Enter exactly the resolution your canvas has in the Overlay Designer as Width and Height (default 1920x1080, shown/changeable via the resolution dropdown at the top of the editor). If the browser source's width/height doesn't match the canvas's resolution, the overlay will appear stretched or cropped.
- Confirm with OK.
Important checkboxes in the browser source settings
| Setting | Recommendation |
|---|---|
| Use custom CSS | Not needed, you can leave this empty. |
| Background color | Has no effect, the overlay itself is already transparent. |
| Refresh browser when scene becomes active | Recommended, so the overlay reloads whenever you switch to the scene. |
| Control audio via OBS | Enable this if your overlay plays sounds (e.g. event sounds, text-to-speech, minigame sounds). The browser source then appears as its own audio source in the mixer, and you can control its volume independently from your system. |
Transparent background
The overlay is transparent by itself, there's nothing to configure for that. In OBS, simply place the browser source above your game or camera in the source order (higher in the sources list = further in front in the image).
Size and position in the scene
The browser source uses the width/height you entered when creating it. If you want to resize or move it within the scene, you can do that like any other source by dragging the corner handles. For a crisp, undistorted look, keep the aspect ratio while doing so.
Multiple overlays at once
If you've created several canvases (for example one for your regular stream and one for a special event), create a separate browser source for each, with its own link. You could then have a different browser source active per scene, or show both at once if their widgets don't overlap.
Troubleshooting
The overlay stays blank / black. Check that the link was pasted in full and unchanged (no cut-off character at the start/end). Open the link in a regular browser tab to check, the overlay should be visible there (on a transparent or checkered background in the browser).
Changes in the editor don't show up in OBS. The overlay normally reloads itself after a change in the editor (with a short delay). If that doesn't happen once, refresh the browser source in OBS manually: right-click the source → Interact, or in the properties dialog use Refresh cache of current page, and restart OBS if needed as a last resort.
I clicked "Regenerate link" and now the overlay is blank. That's expected: the old link just became invalid. Copy the new link from the editor and re-enter it in the browser source's properties.
Sounds don't play or aren't audible. Check whether "Control audio via OBS" is enabled on the browser source, and whether the matching audio source in the mixer isn't muted.
The overlay looks stretched or cropped. The browser source's width and height in OBS must exactly match the canvas's resolution. Open the editor, check the configured resolution, and enter exactly those values in OBS.
Which resolution should I choose? Usually one matching your stream scene's resolution, typically 1080p (1920x1080). A smaller resolution is fine for a few small widgets, while 1440p or 4K can help for many or very large widgets.