Skip to content
TwoolsTwools
Create my overlay

OBS · 5 min read

How to add an overlay in OBS (Browser Source)

You have an overlay, or you want to build one, and it needs to show up in your stream. In OBS, that goes through one specific type of source: the Browser Source. It displays a web page on top of your game or your camera. Here is how to set it up.

Build your overlay and copy your link

Free plan · No credit card

Reference page: Your widgets in an OBS Browser Source, with a single link.

Before you start

  • OBS Studio installed, or any streaming software that accepts a Browser Source
  • Your overlay link. Twools creates one for you, and the method works for any other link
  • Your scene already in place, with your game capture or your camera

Step by step

  1. 01

    Understand what a Browser Source is

    A Browser Source is a web browser built into OBS: you give it an address, it displays the page in your scene. Overlays use it because a web page can be animated, transparent and updated without touching OBS.

  2. 02

    Add the source to your scene

    In the Sources panel, click the + button, then pick Browser. Give it a clear name, for example "Overlay", and confirm. The properties window opens.

  3. 03

    Paste the link and set the size

    Paste your overlay link into the URL field. Set the width and the height to your canvas resolution, usually 1920 and 1080, then confirm.

  4. 04

    Check the result

    The overlay appears in your scene on a transparent background: only your widgets are visible. If it is misaligned, right-click the source, then Transform and Fit to screen. Keep the source above your game capture in the list: the order of sources sets the stacking.

  5. 05

    One link for the whole overlay

    With Twools, your whole overlay fits in a single link: timer, alerts, chat, goals. You create it in the editor with the "Overlay link" button, paste it once, and your edits reach OBS without reopening the properties.

Widgets to put this guide into practice

Watch the demo

The full workflow in real conditions: building the overlay, adding it to the streaming software, running it live. The video is in French.

Tips

  • If nothing shows up, open the source properties and click "Refresh cache of current page".
  • Leave "Shutdown source when not visible" unchecked: the overlay stays loaded between two scenes and does not have to reload.
  • The source size must be the size of the OBS canvas. Otherwise the overlay will look blurry or cropped.

Frequently asked questions

Does this work with software other than OBS Studio?

Yes. Any streaming software that accepts a Browser Source is used the same way: the method and the link are identical.

Does an overlay slow down the stream?

A Browser Source uses resources, like any open web page. With Twools, the whole overlay fits in a single source, instead of one source per widget.

Why is my overlay not showing?

Check the link first, then refresh the cache from the source properties, and make sure the source sits above the others in the list. If the screen shows "Overlay link not found", the link has been regenerated or copied wrong: copy the current link in Twools and paste it into the source. "Incomplete overlay link" means the link was cut off when pasted: copy it again in full.

Do I have to rebuild the source after every change?

No. The link does not change when you edit your overlay. It only changes if you click "Regenerate the link": the old link is then cut, and you have to paste the new one.

Learn moreWhy TwoolsBuild your overlay and copy your link