Add Streambar to OBS

Two ways in: import the ready-made scene collection, or add the browser source by hand. Either takes about a minute.

1. Quick import (recommended)

In your Streambar control panel, click Download for OBS — you get a file called streambar-obs-scene.json. Your overlay URL is already in it, along with the right size and settings, so there is nothing to paste.
In OBS, open Scene Collection → Import…
Click Browse next to Collection path and choose the downloaded streambar-obs-scene.json.
Press Import.
Now switch to it: open the Scene Collection menu again and pick Streambar. OBS imports the collection but stays on the one you were using — until you select it, nothing on screen changes.
That is it — the Streambar overlay browser source is already pointed at your overlay, at the size your layout needs. Open Properties if you want to see the URL; you should not need to change anything.

Your existing scenes are untouched. Importing creates a brand-new scene collection alongside whatever you already have — nothing is overwritten.

Prefer to keep streaming from your own collection? Switch to Streambar, right-click the Streambar overlay source and choose Copy, then switch back to your own collection and use Edit → Paste (Reference). Both copies stay linked to the same overlay.

2. Manual setup (fallback)

In the Sources panel click + and pick Browser.
Name it Streambar overlay and click OK.
In URL, paste your overlay URL — use the Copy button in the Streambar panel so you get it exactly right.
Set Width to 980 and Height to 190 — or 342 if you are on the Broadcast Scores layout, which stacks three strips. The control panel prints the right size under your overlay URL. Leave FPS at its default.
Leave Shutdown source when not visible unticked, and tick Refresh browser when scene becomes active.
Click OK, then drag the source to the bottom of your canvas.
Portrait / Whatnot canvas (1080×1920): sit it flush against the bottom edge. Landscape: leave it bottom-left.

3. Where to put it

The bar is 980 × 190 — or 980 × 342 on Broadcast Scores — and transparent around the edges, so it goes wherever your platform leaves room. Two rules everywhere: keep it inside the outer 4 % of the frame (TVs and phones crop the edges), and keep it clear of the platform's own controls, which sit on top of your video.

Whatnot (portrait, 1080 × 1920 canvas)

Whatnot draws its chat over the bottom third of the video and puts the Buy / Bid controls in the bottom-right corner. Anything you put there is hidden behind them.
Put the bar above the chat: with the source at its native 980 × 190, set its position to X 50, Y 1120. That leaves the top of the chat region (from about Y 1350) clear and keeps the bar out of the buy button's way.
If you would rather keep the middle of the frame for the product, the other safe zone is the top band: Y 140, under the seller strip Whatnot draws at the very top.
The compact layouts (Slim, Ticker, Strip) take less of the frame if space is tight.

Twitch (landscape, 1920 × 1080 canvas)

On mobile and in theatre mode Twitch lays chat over the bottom-left of the video, and the player controls appear along the bottom edge on hover.
Put the bar bottom-centre, 60 px up from the edge: position X 470, Y 830. It sits above the controls and to the right of where overlaid chat lands.
If you also run an on-screen chat widget bottom-left, move the bar to the top-left instead: X 60, Y 60, where nothing of Twitch's is drawn.
Logo right (Colours → Logo placement) is worth trying bottom-centre, so the logo sits away from any chat.

To position a source precisely in OBS: right-click it → Transform → Edit Transform… and type the X and Y. Check the result on your phone, not just on the desktop preview — that is where the chat and the buttons are.

4. Checks

Your messages should appear within about a second of the source loading.
Blank overlay? Re-copy the URL from the panel — the token is case-sensitive, and a single wrong character shows nothing.
Never updates after you save? Check the URL is https on the live Streambar domain, not a local or http address.
Stuck on something old? In Sources, right-click the Streambar overlay source, choose Properties and click Refresh cache of current page. That throws away whatever OBS cached and reloads the overlay from scratch — the one fix worth trying before anything else.

Screenshots

Screenshot: OBS Scene Collection → Import…

Screenshot: choosing streambar-obs-scene.json in the import dialog — Screenshot: choosing `streambar-obs-scene.json` in the import dialog

Screenshot: Browser source properties with URL, width 980 and height 190 — Screenshot: Browser source properties — URL, width **980**, height **190**

Screenshot: the overlay positioned at the bottom of a portrait canvas

FAQ

What size should the source be?

980 × 190 px for every layout but one. Broadcast Scores — messages, live scores and your fantasy league stacked — is 980 × 342 px. The control panel prints the size for the layout you are on, right under your overlay URL, and the downloaded scene file is already set to it; if you switch layouts, change the height in Properties or download the scene again. Either way it is the overlay's native size, so it stays pixel-sharp. Scale it in OBS if you want it smaller — drag a corner handle (not an edge) so the proportions hold.

Will I get a black box behind it?

No. The overlay page background is fully transparent, so only the bar and your logo render over your stream.

Do I need to refresh OBS after changing my messages?

No. Saving in the control panel pushes the change to the overlay instantly — no refresh, no restart, safe to do mid-stream.