Create Browser Sources for OBS

Prepare the channel and OBS

• Create private Browser Sources.
• Preview their content.
• Position the content.
• Keep each saved source operational in OBS.
• Choose the channel you intend to show on stream. The owner or a permitted moderator can manage its Browser Sources.
• Open Channel setup.
• Turn on Overlays. The feature card saves the change immediately.
• For a Guessing Browser Source, turn on Guessing.
• For a Points Browser Source, turn on Points.
• For a Play with viewers Browser Source, turn on Play with viewers. These features require both switches for preview and display.
• Use software that supports web Browser Sources, such as OBS Studio.
• Open Overlays under Chat tools.
• Sources is a tab on the Overlays page.
• Cues is a tab on the same page.
• Media is a tab on the same page.
• In BlokeBot, the Sources address is /overlays#sources.
• The Cues address is /overlays#cues.
• The Media address is /overlays#media.

Create and protect a Browser Source

New opens an unsaved editor. Only Create overlay creates the source.

BlokeBot can show the private Browser Source URL only after creation or rotation.

1. On Sources, select New.
2. Enter a name.
3. Select its type.
4. Complete the type-specific settings.
5. Select Create overlay.
6. Copy the private Browser Source URL when it appears.
7. In OBS, add a Browser Source.
8. Paste the URL.
9. Set Width to 1920.
10. Set Height to 1080.
11. Place the source in the scene.

• Keep the private Browser Source URL out of chat.
• Keep the private Browser Source URL out of screenshots.
• Keep the private Browser Source URL out of stream recordings.
• Keep the private Browser Source URL out of public notes.

Preview and edit appearance

• Preview is above configuration. Choose Live for the current saved state or Representative to inspect a useful example before the real trigger happens.
• The 1920 × 1080 canvas shows how the selected Browser Source will look in OBS. Drag anywhere on the selected body to move it. Drag an edge or corner to resize it.
• Use the arrow keys on the selected body for one-pixel movement. Use Shift plus an arrow for ten pixels. The keyboard-operable edges and corners resize in the same increments.
• For precise geometry, enter X.
• For precise geometry, enter Y.
• For precise geometry, enter Width.
• For precise geometry, enter Height.
• Reset restores the type's default placement.
• Until you save, changes to geometry update only the authenticated Preview.
• Until you save, changes to style update only the authenticated Preview.
• Until you save, changes to display choices update only the authenticated Preview.
• Select Save overlay before you expect a change in OBS or another private Browser Source.

Advanced styling

Advanced styling starts collapsed. Overlay-local CSS applies only to the selected source. Available selectors appear below.

• .overlay and .card.
• .accent and .kicker.
• .title and .detail.
• .result.
• Use the listed selectors to adjust colors and type. These selectors do not change the dashboard or another Browser Source.
• BlokeBot rejects imports and external URLs.
• BlokeBot rejects markup and scripts.
• BlokeBot rejects at-rules and selectors outside the selected Browser Source.
• If BlokeBot rejects CSS, correct the issue in the message. Save again. BlokeBot does not apply part of an invalid change. The last saved appearance remains live.

Guessing rounds

• Turn on Guessing game.
• Create the Browser Source.
• Select whether to show the number of guesses.
• Use Representative to inspect the Open state.
• Use Representative to inspect the Closed state.
• Use Representative to inspect the Result state.
• Save the appearance.
• Use the normal Guessing dashboard to start a round.
• Stop the round.
• Resolve the round.
• The first configured answer is its main answer. Aliases still work for viewers but do not change the displayed setup language.
• If BlokeBot pauses Preview, restore both Overlays and Guessing game in Channel setup. Saved setup remains while either feature is off.

Active Giveaways

• Turn on Points.
• Select a Giveaway title.
• Set the entrant count.
• Set the close-time countdown.
• Set the current join command.
• Use Representative to inspect Open presentation.
• Use Representative to inspect Closing presentation.
• Use Representative to inspect Completed presentation.
• Use Representative to inspect Cancelled presentation.
• Save before you run the giveaway from Points.
• When there is no active giveaway, the Browser Source renders nothing. There is no idle card for viewers.
• If it stays blank during an active giveaway, check Overlays and Points.
• Check the source.
• Check the private URL.
• Check the giveaway state.

Show community goals and bounties

A community goal inherits Community progression and Overlays. A bounty inherits Bounties and Overlays. Bounties itself remains unavailable when its required Points switch is off.

A bounty can also show a bounded number of recent public contributor login and amount callouts.

Representative does not change the goal or bounty.

1. Create a Community goal or Viewer-funded bounty Browser Source.
2. Choose one current public item or rotate current public items at the saved interval.
3. Use Representative to inspect the available states.
4. Position the source.
5. Save the source.
6. Use its private URL in OBS.

• Representative state: Active.
• Representative state: Progress update.
• Representative state: Completed.
• Representative state: Failed.
• Representative state: Expired.
• Representative state: Empty.
• Live contributions coalesce and update current progress without refresh. A reconnection restores the latest authoritative state. It does not replay each prior contribution or completion animation.
• Community goal output contains public communal definitions only.
• Community goal output excludes Hidden seasons and per-viewer progress.
• Community goal output excludes identities and private notes.
• Bounty output contains the public title and public progress.
• Bounty output contains the public target and the public percentage.
• Bounty output contains the public expiry and the public lifecycle state.
• Bounty output contains only the configured public pledge callouts.
• Bounty output excludes private bounties and Twitch user IDs.
• Bounty output excludes balances and moderation reasons.
• Bounty output excludes internal accounting.
• If either inherited parent is off, the retained editor points to Channel setup.
• If either inherited parent is off, projection stops.
• If either inherited parent is off, preview stops.
• If either inherited parent is off, tests stop.
• If either inherited parent is off, publication stops.
• If either inherited parent is off, reconnection stops.
• If either inherited parent is off, animation stops.
• Saved source and domain history remain. An enable action restores the current state.
• BlokeBot does not replay suppressed updates.
• BlokeBot does not replay suppressed timers.
• BlokeBot does not replay suppressed queued work.
• BlokeBot does not replay suppressed animations.

• Set up viewer-funded bounties
• Create communal season goals

Event feed

• Choose the maximum waiting cards and what happens when the feed is full.
• Independently turn point awards and Guessing winners on or off.
• Independently turn Giveaway winners and Bingo events on or off.
• Independently turn achievement completions on or off.
• Settings for an off source collapse and keep their saved values.
• For each enabled source, edit its message.
• Edit its priority and display time.
• Select a Representative event to check the result.
• If an expected card is absent, check that its feature and event source are on. Re-enable the source for future events. BlokeBot does not replay events that it missed while the source was off.

Present achievements in the Event feed

• Turn on Overlays and Community progression.
• Select the Event feed source.
• Enable Achievement completion. This feature does not create an additional Channel setup switch.
• Set the public-safe template.
• Set the priority and display time.
• Preview a Representative completion. Preview and test do not grant an achievement or change progression.
• A genuine supported achievement completion enters the queue once.
• An achievement card can show the viewer name.
• An achievement card can show the achievement name.
• An achievement card can show presentation-safe rewards or points.
• Achievement cards exclude Twitch user IDs and balances.
• Achievement cards exclude moderator notes and internal keys.
• Achievement cards exclude reward tokens.
• If either parent is off, BlokeBot immediately clears a connected achievement card.
• If either parent is off, BlokeBot blocks projection.
• If either parent is off, BlokeBot blocks the queue.
• If either parent is off, BlokeBot blocks preview.
• If either parent is off, BlokeBot blocks publication.
• If either parent is off, BlokeBot blocks reconnection.
• Other configured Event feed kinds can continue when their own requirements are met.
• Saved feed configuration and history remain. Re-enable accepts only new achievement completions.
• BlokeBot does not replay suppressed events.
• It does not replay suppressed queued work.
• It does not replay suppressed timers.
• It does not replay suppressed animations.
• After the clear, stale pre-disable publication cannot reappear.

• Configure seasons and achievements

Viewer Queue

• Turn on Play with viewers. Create a queue first. A viewer must sign in with Twitch to use its viewer page. There is no unsigned typed-login fallback.
• Choose the queue.
• Choose the number of Current party rows.
• Choose the number of Next rows.
• Inspect the Open example.
• Inspect the Ready check example.
• Inspect the Party selected example.
• Every configured field is optional and public on the viewer page and Viewer Queue overlay. Ask only for details that are safe to show on stream.
• Configured entry answers are public on the Viewer Queue overlay. Lobby messages and moderator notes remain private, and the overlay does not show a wait estimate.
• If BlokeBot pauses Preview, restore both Overlays and Play with viewers. The current queue and saved appearance remain. BlokeBot does not replay missed animations.

Cue player and live recovery

• A Cue player is a Browser Source target for reusable Cues.
• Create the Cue player’s private URL here.
• Protect that URL.
• On the Cues page, build content.
• Test the content.
• Send test pulse checks the selected enabled source. A connected Preview or OBS source responds and does not expose its private URL.
• If OBS is stale after a network loss or restart, reload that Browser Source. It reads the latest saved state and reconnects.
• Rename keeps the private URL.
• Disable stops display and retains setup.
• Rotate revokes the old URL.
• Delete permanently removes the source.