Add Streambar to OBS

Two ways in: add it as a Browser Source, or import the ready-made scene collection instead. Either takes about a minute.

1. Add it as a Browser Source (recommended)

One source, added straight into the scene you already stream from — nothing to import and nothing to switch to.

1. In the Sources panel click + and pick Browser.
2. Name it Streambar overlay and click OK.
3. In URL, paste your overlay URL — use the Copy button in the Streambar panel so you get it exactly right.
4. Set Width to 980 and Height to 342 — the one size every layout is tested to fit, so switching layouts later never needs a resize. The control panel prints that same size under your overlay URL. Leave FPS at its default.
5. Leave Shutdown source when not visible unticked, and tick Refresh browser when scene becomes active.
6. Click OK, then drag the source to the bottom of your canvas.
7. Portrait / Whatnot canvas (1080×1920): sit it flush against the bottom edge. Landscape: leave it bottom-left.

2. Or import the ready-made scene collection

Pick this if you are new to OBS or would rather not type anything in: the file already holds your overlay URL, the size and the settings. It arrives as a scene collection of its own rather than inside the scenes you have, so it suits a fresh start best — the tip under the steps shows how to bring the source across to your own.

1. 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.
2. In OBS, open Scene Collection → Import…
3. Click Browse next to Collection path and choose the downloaded streambar-obs-scene.json.
4. Press Import.
5. 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.
6. 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.

3. Where to put it

The bar's browser source is 980 × 342 for every layout — 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.

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. StreamFrame — a border round your camera

A StreamFrame is an animated border that sits over your camera box. It is two sources in one scene, and the order matters: in the Sources list the StreamFrame goes above your camera, because OBS draws the top of the list in front.

1. Add the camera first: + → Video Capture Device. Put it where you want your face on screen.
2. Add the frame on top: + → Browser, name it StreamFrame overlay, paste the StreamFrame's own URL, and set Width and Height to the size printed under that URL in the panel — 860 × 484 unless you have picked another one.
3. As with the bar, leave Shutdown source when not visible unticked and tick Refresh browser when scene becomes active.
4. Drag StreamFrame overlay above the camera in the Sources list, then line the two up so the border sits round the picture.
5. Scale them together: select both (click one, ctrl/⌘-click the other), or right-click → Group Selected Items, and drag a corner handle. Resizing one on its own is what pulls the frame off the camera.

5. Scenes — one source over your whole stream

A Scene is the widescreen overlay: one browser source across your whole canvas — a background, a box cut out for your camera, your messages and the games you follow, all in one. It is built for Twitch, YouTube and Kick, and it comes with Pro.

1. Add it: + → Browser, name it Scene overlay, paste the scene's own URL, and set Width to 1920 and Height to 1080. If you stream on a 1280 × 720 canvas, set the source to 1280 and 720 instead — the scene scales itself to fit whatever size you give it.
2. As with the bar, leave Shutdown source when not visible unticked and tick Refresh browser when scene becomes active.
3. Put it at X 0, Y 0 — right-click → Transform → Edit Transform… — so it lines up with the canvas corner for corner.
4. Drag Scene overlay to the top of the Sources list. OBS draws the top of the list in front, and a scene belongs in front of everything.
5. Your camera goes under it: add your Video Capture Device below it in the list and line it up with the see-through cut-out — top-left on Studio, top-centre on Arena, top-right on Desk.

6. Streamclips — buttons you fire

Streamclips is a wall of buttons you press on air: a line of text, a GIF or a short video clip lands on your stream the moment you press one. Each folder of buttons is one browser source of its own, so you add it once and never touch it again — and everything in that folder plays on it.

Add a folder

Start in the Streambar control panel, not OBS. Open Streamclips and add a folder. A folder is a set of buttons and it has a browser source of its own: name it, and the panel prints a URL underneath. That URL is what goes into OBS next. Add as many folders as you like, each with a URL of its own.

Put its URL in OBS

1. Add it: + → Browser, name it after the folder, and paste that folder's URL — use Copy next to the URL in the Streamclips page so you get it exactly right.
2. Set Width and Height to your canvas size — 1920 × 1080 on Twitch, YouTube or Kick, 1080 × 1920 on Whatnot. A clip is placed as a share of the screen, so the source has to cover the whole of it.
3. Leave Shutdown source when not visible unticked — a source that shuts down is a source that is not listening when you press a button.
4. Put it at X 0, Y 0 — right-click → Transform → Edit Transform… — and drag it to the top of the Sources list, so a clip lands in front of everything.
5. One source per folder. Add a second folder and it gets a URL of its own; add that one the same way.

Before you add a single clip, press Show test card next to the folder's URL in the panel. It draws a guide on that browser source for ten seconds: its edges, its centre lines, the folder's name and the exact size OBS has given it in pixels. That proves the URL landed and shows you how much of the frame the source really covers.

Tick "Control audio via OBS"

Video and sound clips carry sound, and without this it plays on your computer and never reaches the stream. Tick Control audio via OBS on the browser source and it appears in your Audio Mixer: set its level there, like any other source.

Add clips

Inside a folder you can add six kinds of clip: a line of animated text, a GIF, a video clip from our catalogue, a video of your own, a sound of your own, or an item from the Streambar library, clips we made that you can add as a button in two taps. Whichever kind you pick, give it a name and it becomes a button in the folder.

Live mode

The page has two faces. Setup is where you build folders and clips. Live is just the buttons: built for a phone held in one hand while you stream, with your favourites first. Star a clip in Setup and it also sits in the row at the top of Live, whichever folder it lives in.

Stream Deck links

Every clip has a link of its own. Copy it from the clip's settings and paste it into a Stream Deck Website button, with GET request in background ticked, and pressing that button on the deck fires the clip exactly as pressing it in the panel would.

The green screen tip

7. 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

FAQ

What size should the source be?

980 × 342 px for every layout. That is the tallest stage any bar layout needs (Broadcast Scores, Centre Stage and Spotlight's three-strip stage); every other layout is tested to fit inside it, so switching layouts afterwards never needs a resize. The control panel prints that size under your overlay URL, and the downloaded scene file ships it already set, with the bar placed so it sits exactly where its own size would have put it. It is the overlay's native size either way, 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. A StreamFrame is not a bar: it fills whatever size you give the browser source, at any shape, and scales itself to fit. It starts at 860 × 484 px (1280 × 720 on Twitch, YouTube or Kick) and Settings → Browser source size offers 1920 × 1080 and a custom size besides — match it to your camera box, and the panel prints your choice under the URL. A Scene is not a bar either: it covers the whole canvas at 1920 × 1080 px — give the source your own canvas size if you stream at 1280 × 720, and the scene scales itself to fit.

Not sure you got it right? Press Test card beside your overlay URL in the control panel: a guide goes up on that bar in OBS, with a ruler in real pixels along the top and bottom, green for what everybody sees and red for what a phone app crops off the sides. If you can see all the green, you are good. It takes itself off after two minutes.

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.