Add an overlay to OBS: how to set up the browser source

What you need

• An approved Riglayer account (sign in with Twitch, then an admin approves your channel)
• OBS Studio on your streaming computer

The steps

1. Create an overlay

   In Riglayer, open the “Overlays” page and click “New overlay”. Give it a name, for example “Main scene”, choose a template and the size, and click “Create”.

   • Templates: “Blank”, “Gaming basics” (alert, timer, hearts, death counter, goal bar), “Stream start” (welcome text with countdown) and “Alerts only”.
   • Size: 1920 × 1080 (Full HD) is the default, 1280 × 720 and 2560 × 1440 are also available. It should match the resolution of your OBS scene.

2. Copy the link

   At the top of the editor there is a field with your overlay's address. Click “Copy URL”. The link contains a secret key: don't share it, because anyone who knows it can display your overlay.

3. Add a browser source in OBS

   In OBS, click the plus in the “Sources” box and choose “Browser”. Name the source, paste the link into “URL” and enter your overlay's width and height, usually 1920 and 1080. Confirm with “OK”.

   • The size is also shown in the editor (“In OBS: width 1920, height 1080”). If you leave it out, OBS starts with 800 × 600 and the overlay looks cut off.
   • You don't need a plugin or any add-on in OBS.

4. Check live sync

   Move an element in the editor or change a text. In “Real time” mode (default) the change appears in OBS immediately. Next to the overlay name a green dot shows that it is currently open somewhere.

5. Optional: send only after “Save”

   If you want to rebuild in peace during the broadcast, switch from “Real time” to “Only after saving” above the editor. OBS then shows only the last saved version; “Save” (Ctrl+S) takes your changes live, “Discard” reverts them. Counters, timers, videos and sounds stay controllable immediately in both modes.

Tips and common problems

• Sound in the OBS audio mixer: in the properties of the browser source, enable “Control audio via OBS”. The overlay then gets its own slider in the audio mixer, for example for alert sounds.
• If the source stays empty, the link was usually copied incompletely. It must start with Riglayer's address and contain the key at the end.
• You can create several overlays (up to 25) and place each as its own browser source in a scene, for example one just for alerts.