OBS Browser Source
Everything you need to know about adding, sizing, and docking the Tangia overlay in OBS Studio.
Add a Browser Source to your scene
In OBS Studio, right-click the Sources panel → Add → Browser. Name it something like "Tangia Overlay". Click OK.
Set the required properties
In the Browser Source Properties dialog:
| Property | Value | Notes |
|---|---|---|
| URL | https://overlay.tangia.org/live/CHANNEL_ID | Find in your dashboard |
| Width | 1920 | Match your canvas |
| Height | 1080 | Match your canvas |
| FPS | 60 | 30 OK for non-animated |
| Custom CSS | leave blank | Don't override theme |
| Shutdown source when not visible | unchecked | Keep connected to Twitch |
| Refresh browser when scene becomes active | unchecked | Prevents reconnect lag |
Size and position the source
The browser source is set to full canvas (1920×1080) by default. Don't resize it in the scene — let the overlay position itself via the Tangia Configurator instead. Resizing the scene layer crops or stretches the overlay, which breaks transparency.
Optional: Dock the browser source
If you want to monitor the Tangia queue in OBS without switching windows, you can add a docked panel:
- In OBS, go to View → Docks → Custom Browser Docks
- Add a new dock with URL:
https://overlay.tangia.org/dock/CHANNEL_ID - The dock panel shows the live queue, recent events, and a manual skip button
The dock URL is different from the overlay URL — it's a control panel view, not a transparent overlay. Don't add it as a source layer.
Refreshing the overlay
Theme changes from the Configurator apply without refreshing OBS. But if you update your Twitch OAuth (revoke and re-auth), you need to force-refresh:
Right-click the Tangia Overlay source in OBS → Properties → click Refresh cache of current page. The overlay will reconnect within 3 seconds.