---
title: Add your overlay to OBS
description: One browser source, four settings, done - including the audio step everyone misses.
---

Your overlay goes into OBS as a single browser source. The steps below are for OBS Studio; Streamlabs Desktop is the same idea.

1. **Add a Browser Source**

    In OBS, click **+** in the Sources panel, pick **Browser**, and name it something like "TipPage overlay".

2. **Paste your overlay URL**

    Copy the URL from the dashboard's **Overlay** page (gear menu, **Copy URL**) and paste it into the **URL** field.

3. **Match the overlay's resolution**

    Set **Width** and **Height** to the resolution shown on the overlay's row in the dashboard - **1920 x 1080** unless you picked something else when creating it. The overlay always renders at exactly its own resolution (that's what keeps the layout identical on every screen), so a mismatched browser source will crop or letterbox it. OBS scales the source with your scene from there.

4. **Tick Control audio via OBS**

    In the source's properties, tick **Control audio via OBS**. Without it, TTS and media audio won't route anywhere.

5. **Enable audio monitoring**

    So you can hear TTS and media yourself (not just your viewers):
    - **OBS 32.1 or newer**: click the headphones icon next to the source in the Audio Mixer.
    - **Older OBS**: click the three dots on the source in the Audio Mixer, **Advanced Audio Properties**, set **Audio Monitoring** to **Monitor and Output**.

{/* SCREENSHOT /images/overlay/obs-browser-source.png : The OBS browser source properties dialog with the overlay URL pasted, 1920x1080 set, and "Control audio via OBS" ticked. Uncomment the Frame below once taken. */}
{/* <Frame caption="The browser source settings in OBS.">
![OBS browser source properties](/images/overlay/obs-browser-source.png)
</Frame> */}

{/* SCREENSHOT /images/overlay/obs-audio-monitoring.png : The OBS Audio Mixer showing the headphones icon on the overlay source (OBS 32.1+), or the Advanced Audio Properties dialog with "Monitor and Output" selected. Uncomment the Frame below once taken. */}
{/* <Frame caption="Audio monitoring is the step everyone misses - this is how you hear your own TTS.">
![OBS audio monitoring](/images/overlay/obs-audio-monitoring.png)
</Frame> */}

Back in the dashboard, the overlay's row should now show a green **connected** chip. Fire a [test alert](/alerts/test-alerts) to prove the whole chain works.

## Troubleshooting

- **"This overlay is already open on another device"** - the same URL is loaded somewhere else (another OBS profile, a stray browser tab). Close the other one; it retries automatically every 10 seconds.
- **"Another overlay is already connected with an exclusive widget"** - two of your overlays both have a tip alert, media player, or soundboard, and both are connected. Keep one of them, or move the widget.
- **"This overlay key has been rotated"** - the key was rotated in the dashboard. Copy the new URL and update the browser source.
- **No sound** - it's almost always the audio steps: **Control audio via OBS** unticked, or monitoring off. Check both.
- **Changes in the dashboard not showing** - the overlay reloads itself when you save settings; if it looks stuck, right-click the source in OBS and hit **Refresh**.