Create and manage Browser Source overlays

Check access and prerequisites

• Choose the channel you intend to show on stream. Its owner or a permitted moderator can manage its overlays.
• Open Channel setup, turn on Overlays for that channel and save the change.
• Use broadcasting software that supports a web Browser Source, such as OBS Studio.
• BlokeBot v0.5 supports the transparent Empty V1 overlay at a 1920 × 1080 canvas. It has no custom CSS, JavaScript or visual fields.

Create the Browser Source

1. Open Overlays under Chat tools and select New.
2. Name the overlay, then select Create overlay. New only starts an unsaved editor; it does not create anything by itself.
3. Copy the private Browser Source URL when it appears. BlokeBot shows that URL only after creation or rotation.
4. In OBS, add a Browser Source, paste the URL, set Width to 1920 and Height to 1080, then place the source in the scene.
5. Keep the page background transparent. A blank canvas is the normal resting state for Empty V1.

Preview and confirm delivery

• Live preview uses the same document, client, CSS and 1920 × 1080 renderer as the Browser Source. It does not reveal the private URL.
• Representative preview shows the supported Empty V1 state without opening a live connection.
• Send test pulse publishes temporary presentation data only to the selected overlay. It does not change stream or chat data.
• Connection status is approximate diagnostic presence. It excludes this dashboard's Live preview and does not prove that the OBS source is visible in the current scene.

Understand live updates and reconnection

A Browser Source loads the current snapshot before listening for live updates. If an update is missed, the client reloads current state rather than applying an uncertain sequence.

Temporary network loss triggers bounded automatic reconnection. A server restart or a newer state replaces the earlier live sequence, so the source converges on the latest supported presentation without replaying stale events.

• Leave the source enabled in OBS when you want it to reconnect automatically.
• After a long outage, reload the Browser Source if OBS still shows an old state.
• Use Live preview and Send test pulse to separate a renderer problem from an OBS scene or source-visibility problem.

Rename, disable, rotate or delete

• Rename changes the dashboard label without changing the private URL.
• Disable immediately makes the Browser Source unavailable. Enable restores the same current URL.
• Rotate private URL immediately revokes the old URL. Copy the replacement once and update every OBS source that used the old one.
• If the URL may have been shared or captured, rotate it rather than relying on obscurity.
• Delete permanently removes the overlay and stops every Browser Source using its URL.

Fix common failures

• No Overlays menu: select the correct channel and turn on Overlays in Channel setup.
• No saved overlay after selecting New: complete the name and select Create overlay.
• Private URL unavailable: create the overlay or rotate its URL; BlokeBot cannot reveal an earlier URL again.
• Overlay unavailable in OBS: check that it is enabled and that OBS has the current private URL, especially after rotation.
• No live client detected: select Live preview or connect the Browser Source in OBS before sending a test pulse.
• Blank but connected: Empty V1 is transparent at rest. Send a test pulse and check the production preview before changing the OBS scene.
• Stale after reconnect: reload the Browser Source so it requests the current snapshot and starts a fresh live connection.