How to add a browser source in OBS

What an OBS browser source is

A Browser Source is a transparent web page that OBS renders directly inside your scene. The page loads at a private URL, paints whatever the overlay draws (a chat box, a song widget, an avatar peeking in from the edge), and OBS composites it on top of your game / camera / background.

Every overlay in this toolset is a browser source. You create one once per overlay you want on stream, paste the URL into OBS, and tweak the configuration here in the dashboard — the page updates live without restarting OBS.

Step 1 — Get the URL

Pick an overlay from the dashboard (or the docs sidebar to the left) and click Create your first source. The tool generates a URL that looks like:

https://toolset.deutschmark.online/lurk-peek/?wid=abcdef1234567890

The wid at the end is your private source token. Don't share it — anyone with this URL can render your overlay configuration. If it leaks, click Replace on the tool page to issue a fresh token; the old URL stops working immediately.

Click Copy on the URL row to put it on your clipboard.

Step 2 — Add it to OBS

1. Open OBS Studio.
2. In the Sources panel (bottom-left by default), click the + button and pick Browser.
3. Name it something memorable (e.g. Lurk Peek) and click OK. If you want to reuse the same overlay in multiple scenes, tick "Add Existing" later instead of creating duplicates.
4. In the Browser source properties window:
   • Paste the URL into URL.
   • Set Width and Height to the overlay's recommended resolution. Most overlays default to 1920×1080. The dashboard shows the recommended size per tool — use it.
   • Leave everything else on defaults the first time around.
   • Click OK.

The overlay should appear in your scene. Drag it to position; the edges snap to your canvas so you can pin to a corner cleanly.

Step 3 — Reorder, group, hide

• Drag the source up in the Sources list so it renders on top of your game / camera. OBS paints from bottom to top.
• Right-click → Add → Group if you want to keep all your toolset overlays together (Chat box + Event list + Lurk peek inside one "Overlays" group).
• Click the eye icon to toggle visibility per scene. Don't delete a browser source to "hide" it — that throws away the configuration. Just untick the eye.

The five things that usually go wrong

1. The overlay is showing a blank black or white box

Almost always the URL is wrong. Open it in a regular browser (Chrome / Firefox) — if you see a 404 or a Twitch sign-in screen, the URL is broken or expired. Go back to the tool page, hit Copy again, and replace the URL in OBS. If the URL works in a browser but not OBS, right-click the browser source → Refresh cache of current page.

2. The overlay loads but doesn't respond to chat

The overlay needs to know your Twitch channel name. On the tool's dashboard page, confirm the Twitch channel field is filled with your login (lowercase, letters/numbers/underscores only). Save. The overlay reconnects within a few seconds without an OBS restart.

3. The avatar / image is the wrong user

You're probably looking at the live preview in the dashboard. Test mode cycles sample avatars so you can see how different profile pics read at your chosen size and shape — the real overlay in OBS uses the actual chatter who fired the command.

4. Audio doesn't play

OBS browser sources are muted-by-default for autoplay safety. In the Browser source properties, scroll down and tick Control audio via OBS. The overlay shows up in your Audio Mixer; unmute it. If a clip plays loud anyway, enable audio normalization in the tool's settings.

5. The overlay is frozen / hasn't updated since I changed a setting

Most settings hot-swap in real time. If yours doesn't, right-click the source → Refresh cache of current page. If that still doesn't work, the browser source might be holding an old cached version of the JS bundle — remove the source and re-add it with the same URL.

Per-source vs per-scene

Every tool in the toolset lets you create multiple sources — each one with its own URL, its own configuration, and its own slot in OBS. Common patterns:

• One source, many scenes — create the source once, use Add Existing in OBS to reference the same browser source from every scene that needs it. Settings stay in sync.
• Many sources, different looks — e.g. a chat box with frosted glass on your "Just chatting" scene and a compact one on your "Gameplay" scene. Each gets its own URL.

Where to go next

Each tool has its own setup page in the sidebar — the configuration is specific but the flow above is universal. Common first picks:

• Chat Box — your Twitch chat as a transparent OBS overlay, badges and emotes included.
• Music — now-playing widget plus !sr Spotify song requests from chat.
• Lurk peek — chatters' avatars peek in from screen edges when they !lurk.
• Event list — recent subs / cheers / raids / follows scrolling on stream.