OBS overlay setup

Stream Studio crash course & widget guides

Learn what each widget does, choose a starting setup, and follow the steps to put it in OBS.

1. 1
   Open Settings → Overlay → Widgets, or choose Enable this setup from a starter setup in the Stream Studio crash course. Sign in when prompted; the link returns to the same pack. Review the list of widgets that will be enabled and those already on. Cancel changes nothing. Enable setup keeps your other enabled widgets. If another tab changed the selection, refresh it and review again.
2. 2
   Search the grouped widget cards or choose Enabled only. Each card shows an illustrative thumbnail, its recommended width and height, Enable, Copy, Test and How it works. Drag into OBS supplies the name and size automatically; or add an OBS Browser Source, use Copy and enter the recommended dimensions. Copy also works with Streamlabs, which may ignore OBS drag parameters. Backgrounds are transparent. Test the result and allow extra space for long content or a larger theme.
3. 3
   Press Test on a widget to show sample content for up to 20 seconds. During a detected live match, Settings asks before sending: Send anyway puts samples on your on-air sources; Preview here instead opens a local sample page in a new tab and sends nothing to OBS. Stop or automatic expiry restores your real opponent and session, which keep updating beneath the sample.
4. 4
   Choose the theme in Theme, or open a widget card’s Display popover to choose its display time. Default shows the widget’s usual time; Save overlay display applies your draft to connected sources. Timed widgets offer 5, 10, 15, 20, 30, 45 or 60 seconds. Persistent or self-driven widgets control their own visibility. Test fires respect shorter settings and stay capped at 20 seconds. Older URLs with ?theme= keep their explicit look; remove that override once to follow saved changes. Move your theme to your overlay offers this browser’s previous theme as a draft, which still needs Save.
5. 5
   URLs are hidden by default. Copy always copies the complete private URL; if clipboard access fails, a selected text field lets you copy it yourself. Reveal shows that row for this visit, and Hide URL masks it again. These bearer URLs grant access to your overlay, so treat them like passwords.
6. 6
   Use Setup for the All-in-one URL and connection checks. Theme, Ghost Build coach, Build profile and Scenes are separate sections on the same page. Use On this page beside the form, or its dropdown on a phone, to reach one. Tokens points to the one shared token manager above Overlay or Chat & alerts. Configure platforms, alerts and the bot in the separate Chat & alerts tab; copy its private Stream Dock URL there and add it in OBS under Docks → Custom Browser Docks. Theme and Display changes reach connected sources when you Save. Widget enable changes reach connected OBS sources automatically.

The Practice pack enables Randomizer and Scouting. Choose and assign a saved timed build in Ghost Build coach, then copy its permanent widget URL. Packs do not add Browser Sources or connect streaming accounts for you. Scrolling between sections only updates the navigation highlight; choosing a section keeps your draft. Older Look and Ghost section links still reach their canonical section. Leaving a guarded Chat & alerts draft asks whether to stay or discard it.

Preview locally before testing on stream

Choose Preview on a Settings widget card, use the interactive examples in the widget guides, or open the public playground. Select a widget or Show all together, choose a theme preset and try Pre-game, Victory, Defeat, Cheese, Hot streak, Chat burst or Poll. The silent stage uses illustrative sample data without an account or overlay token. Actual size scrolls inside the stage; Replay sample restarts timed content. These choices change only the local preview. Then use Test to verify your actual OBS source, size and saved setup. Preview here instead during a live match opens this playground and sends no sample to OBS.

Open the local widget playground

Open Settings → Overlay → Widgets

Check a source and recover its connection

Overlays reconnect automatically after an outage. Refresh a Browser Source after a site update if it is still running old code; a brief connection failure should recover on its own. Add ?check=1 to an overlay URL (or &check=1 when it already has a query) to show its connection status inside OBS for 10 seconds.

This overlay link no longer works means the token was revoked or mistyped. Copy a fresh URL from Settings → Overlay. The notice shrinks after a minute. The Stream Dock shows the same terminal state and stops retrying a revoked token. While your saved Dock controls are loading, editors stay locked; failed saves keep what you typed so you can edit and Retry.