Add an overlay to OBS · Bloopbot Docs

1. Name your overlay

Open Overlays. The Overlays tab has a searchable library with a live thumbnail for each overlay, drawn with your variables’ and channel data’s current values: Published when its saved overlay edits have been published, Unpublished when its draft has changes still waiting. Published does not tell you whether OBS is open or the source is in your current scene; check your OBS preview for that. Select an overlay to inspect its preview, then choose Open in Studio to edit it. The copy icon beside that action copies its private OBS URL. On a phone, Back to library returns to your overlays.

The Overlays tab with Media, Add alerts and Browse templates below the search, beside the Gameplay inspector with its live preview, Published state, Open in Studio and Copy OBS URL actions. — Your overlays: one card per Browser Source, each with a live thumbnail, its publication status, and copy and bin icons. Click to enlarge.

There are two ways to make one.

Browse templates below the overlay search opens Add to Overlays on the right of your overlays: Bloopbot’s ready-made overlays, each a whole layout drawn in your Active theme, with a picture of what it looks like. Press Add on a row, read its review — “Adds 1 overlay to your channel.” — and press Add. It reads Added, with Add the OBS source and a copy icon (Copy URL) under Set it up, and the overlay joins Your overlays under the row’s name.
New overlay, or the dashed New overlay card at the end of the library, makes an empty one. Give it a Name you will recognise — that is all it asks — and press Create overlay. The editor opens on a blank canvas, on its Add tab, ready for the first layer.

In Add to Overlays	What you get
Gameplay	A camera frame with your name, a goal, polls and predictions, chat and alerts, around your game
Just chatting	A big camera frame with a topic line, supporters, a goal, chat and alerts, on its own backdrop
Q&A	A big camera frame with the viewer question you are answering underneath it, a topic line, chat and alerts, on its own backdrop
Starting soon	A welcome line, a five-minute countdown, what is playing, chat and alerts
Be right back	A five-minute countdown, a status line, top gifters, chat and alerts
Stream ending	A thank-you, when you are next live, top gifters and rolling end credits
Webcam frame	A camera frame with your name, your latest follower and your latest sub, bottom right
Subathon	A subathon timer and goal, top gifters, a supporters ticker, chat and alerts
Chat	Chat down the right, with a highlighted message above it
Alerts & pop-ups	Every alert, polls and predictions, and a highlighted message; nothing shows until something happens
Goals & events bar	A bar along the bottom with your latest follower and sub, a goal and how long you have been live

Each row says Overlay · Over your game, Overlay · Scene screen or, for the full-screen Q&A, Overlay · Full screen, and the overlay you add takes the row’s name. To add one thing on its own, such as a counter or a single alert, open any overlay and drag its tile from the editor’s Add tab (Mix the types you want).

In the editor’s Add tab	What you get
Label	A counter, a line of text or a recent subscriber
Goal bar	Progress towards a goal or a stored number
Event stack	Polls, predictions, hype trains and ad breaks
Poll	Whichever Twitch poll or prediction is running right now, on its own card
An alert type — Follow, Sub, Resub, Gift sub, Cheer, Raid, Redemption or Custom alert	That alert, drawn from its own design; every alert and media file waits its turn in one shared queue
Media	The spot where the images, videos and sounds your Play media flows play are shown, such as a sound for a channel points reward
Chat	Your channel’s chat, with emotes, badges and moderation
Emote Wall	The emotes chat sends, 7TV, BTTV and FFZ included, moving across the screen — Add an emote wall
Now playing	The track that is playing now and the requests coming up next
Giveaway	Your live giveaway: the prize, the keyword, who has entered, and the draw
Wheel	A Spin Wheel your flows spin — Spin a wheel on stream

Your overlays with Add to Overlays docked on the right: Search overlays, the All, Overlays and Alert designs filters, then the ready-made overlays, each with a picture of its layout and Add: Gameplay, Webcam frame, Subathon, Chat and Alerts & pop-ups reading Overlay · Over your game, Q&A reading Overlay · Full screen, and Just chatting, Starting soon, Be right back and Stream ending reading Overlay · Scene screen. — Add to Overlays: Bloopbot’s ready-made overlays, each pictured in your theme. Click to enlarge.

The New overlay popover under the New overlay button: Name holds Just chatting, a line saying it starts empty and you add layers in the editor, and Create overlay and Cancel buttons. — New overlay: a name, and nothing else. It starts empty. Esc or a click outside closes it. Click to enlarge.

An overlay is a surface, and every part of it is a layer — so whatever you start with, you can add more of any type afterwards, and every type is offered on every overlay. Arranging your overlay walks through building one; Put now-playing on stream is the worked example for a single type.

Start from a ready-made overlay

Choose Browse Marketplace at the top, or beside the selected overlay, to find community overlays. Submit to Marketplace opens the submission steps: choose the overlays or custom widgets you made, fill in their listing, and submit them for review. Publish to the Marketplace explains what can be shared.

A ready-made overlay is a whole layout, not a single piece. Everything on it follows your Active theme: switch themes and its text, panels, camera frame and backdrop change with it. Open it like any overlay to move, restyle or remove any part.

Your camera. An overlay can frame your camera but never shows it. In OBS, put your camera source above the overlay’s Browser Source in the Sources list and size it to the inside of the frame. On Just chatting and Q&A, the backdrop covers the whole canvas, so the camera must be above it.
Your name. Gameplay and Webcam frame have a name plate that says your channel’s name. Click it in the editor to change the text.
Viewer questions. Q&A has a Viewer questions layer under the camera. It stays empty until you put a question on your overlay, so nothing shows until then; Catch viewer questions shows how to collect and show them. It is not one of your scene screens, so adding it never asks you to restyle one.
Scene screens. Starting soon, Be right back, Stream ending and Just chatting are scene screens. When you do not have that screen yet, the one you add becomes it.
IRL layouts. On a channel with the cloud stream, the Marketplace also offers IRL layouts, laid out around your phone camera.

When you already have that scene screen, the review asks what to do:

Restyle my screen, picked to start with, gives your screen this layout. Your screen’s current layers are replaced; History keeps them. It keeps its URL, so OBS needs nothing new, and the change waits in your draft until you publish.
Add a new overlay adds it as an ordinary overlay and leaves your screen as it is.

The review for Starting soon when the channel already has a Starting soon screen: You already have a Starting soon screen, the Add button, the question Restyle Starting soon with this layout, or add it as a new overlay? with Restyle my screen picked and Add a new overlay beside it, the note that the screen’s current layers are replaced and History keeps them, What you get, and What’s inside folded. — Adding Starting soon when you already have that screen: Restyle my screen is picked, and Add a new overlay is the other choice. Click to enlarge.

For example: press Add on Starting soon when you already have Studio’s Starting soon screen, leave Restyle my screen picked and press Add. It reads “… has the Starting soon layout in your draft.” Publish, and your Starting Soon scene in OBS shows the new layout on the same URL.

If something looks wrong:

Chat runs past the bottom of its box: that cannot happen on a ready-made overlay. Each chat box keeps to its height and drops the oldest lines. If your own chat layer grows, drag its bottom edge to give it a fixed height.
The camera frame is empty in OBS: add your camera source and place it inside the frame, as above.
The name plate says yourchannel: your channel’s name could not be read when you added it. Click the plate and type your name.

2. Configure and check the canvas

Open the overlay: Create overlay opens it for you; after Add, click its card in Your overlays. The editor opens with the canvas in the middle, your layers on the left under Layers, and the selected layer’s settings on the right — or the overlay’s own style when nothing is selected.
For a counter or live label, choose the variable or data field it should display.
Use the canvas to check text length, size and placement. Your changes go into a draft as you make them, and the status in the top bar reads 1 change · draft saved, 2 changes · draft saved and so on.
Press Publish in the top bar, review the named changes and affected overlays, then confirm Publish to update the published version your Browser Source uses. The status then reads Published.

Routine edits and fresh channel values update the canvas without replaying an unchanged sample alert or its sound. Use Test in editor on an alert layer, or Simulate beside Editor preview in the top bar, when you want to replay a sample.

Click the status to see what is waiting: Waiting to publish includes the overlay’s edits and shared changes, such as alert designs and themes. The draft chip counts those shared changes too. Publish always opens a review, even for one changed part; choose which changed overlays, themes, designs, wheels and flows go live, and leave the rest in your draft. Discard changes… asks before it throws them all away, on every overlay.

The editor status reading 1 change · draft saved, opened into Waiting to publish with only “Starting soon: changed Main settings”, a reminder that Publish and Discard apply to the whole channel draft, an explanation that Published does not confirm OBS visibility, and Publish and Discard changes… buttons. — Waiting to publish: overlay and shared edits, Publish, and Discard changes…. Click to enlarge.

History, beside it, lists every Publish as a version, newest first, with the live one marked Live. Preview shows a version on the canvas without changing anything; Restore to draft puts it back in your draft, and nothing changes on stream until you publish again.

The History popover: “Every Publish is a version. Restoring puts it in your draft — nothing changes on stream until you publish.”, then v1 with its date and author marked Live, listing what it published — Gameplay: added Follow alert, added Raid alert, added Chat, added Media, added design follow, added design raid, created flow Alert: raid — and a Preview button. — History: every Publish is a version you can preview and restore into your draft. Click to enlarge.

An overlay is a surface: that design is the one its layers start with, and you can add pieces of other kinds to the same overlay and give any one of them a design of its own. Arranging your overlay is the guide for that — dragging layers around the canvas, mixing the kinds and setting one layer apart.

3. Add the Browser Source

Open OBS URL in the editor’s top bar and select the copy icon (Copy OBS URL), or use the copy icon (Copy URL) on the overlay’s card. The key in it is never shown, only copied.

The OBS URL popover under the OBS URL button: Overlay URL with the key painted over, the Copy OBS URL icon, the lines about a 1920 × 1080 Browser Source and leaving Shutdown source when not visible unticked, so only the scene on screen plays alerts and they wait while it is hidden, then the Make a new OBS URL… and Delete overlay… icons, and “Treat the URL like a password”. — OBS URL: copy it for your Browser Source. New URL… and Delete overlay… each ask first. Click to enlarge.

In OBS, open the scene that should show the widget.
Add a Browser Source in Sources and give it a clear name.
Paste the copied overlay URL into the URL field. Overlays use a web URL, so leave Local file off.
Set Width to 1920 and Height to 1080, then position the source in your scene. Leave Shutdown source when not visible unticked: only the scene on screen plays alerts, and alerts wait while it is hidden (alerts in more than one scene).
Keep the scene visible while checking the widget. Make another design change in Bloopbot, press Publish, and confirm it appears in OBS.

Streaming in Twitch's dual format as well? The same panel has a second link for a 1080 × 1920 vertical canvas: Vertical overlays for Twitch dual format.

Until you publish, OBS keeps showing the version it already has. Step 5 of Arrange your overlay, Publish your changes, explains the draft, Publish and History.

Starting soon, Be right back, Stream ending and Just chatting screens come ready-made with a theme. Scene screens lists which OBS scene each goes in, and Import the scenes into OBS adds all four at once.

Move a goal bar or counter from a flow

A goal bar whose source is A number you keep, and a label that shows $(var.deaths), both follow a variable. A flow never talks to the widget: it changes the variable with Set variable, and every widget watching that variable updates on its own. The quickest start is the On-screen numbers pack: on Flows, press Marketplace and add it.

Number on screen	Variable it keeps	Point this widget at it
Goal bar	`goal` — new subs, resubs and gifted subs add to it; `!goal` reads it and `!addgoal 5` moves it by hand, and setting that flow’s step to set starts the bar over	Goal bar → source A number you keep → variable `goal`
Win counter	`wins` — `!win` adds one, and setting the step to set with a value of `0` starts the count over	Label → text `Wins: $(var.wins)`
Death counter	`deaths` — from the Starter pack’s Counter templates, not this one: `!deaths +` adds one, mods only. This pack does not declare `deaths` any more — install Starter’s Counter to get the flow and the variable together, or declare `deaths` yourself under Variables if you only want the label.	Label → text `Deaths: $(var.deaths)`

Install the pack and let the install prompt create goal and wins, its number variables.
Create the widget and point it at the same variable name. The Goal bar’s Your own number design is already set to A number you keep and follows goal with a target of 100, and the Label’s counter design already shows $(var.deaths). To choose another, open the goal bar’s Variable list — each entry shows its value now, like goal (now 0) — or pick New variable… at the bottom to declare a number there and then and have the bar follow it.
Check the line under the variable: Changed by 1 flow · Open means one switched-on flow moves it, and Open lists every flow that changes it, each a link to the flow. Pack flows install paused, so it reads Changed by 0 flows until you turn one on; a paused flow is listed, marked paused, but not counted.
Type the command in chat, or use Test fire on the flow, and watch the widget move.
To count something else — bits, follows, raids — open one of the installed flows, swap its trigger, and set how much Set variable adds.

A goal bar layer’s settings with its source set to A number you keep and the Variable picker reading “goal (now 0)”. Under it the line “goal · Changed by 1 flow · Open”, and the Open popover titled Flows that change goal lists four flows as links: Goal: !addgoal, Goal: count gifted subs and Goal: count resubs, each marked paused, and Goal: count new subs, which is on. — A goal bar following `goal`: one flow that is on changes it, and Open lists the paused ones too. Click to enlarge.

Using a Twitch-goal bar or your own widget? A goal bar whose source is a Twitch goal follows only a goal you run on Twitch, so a flow cannot move it. To show a number you keep, open the bar, set its source to A number you keep and pick the variable. A widget you built yourself reads the variable from the vars updates it asks for when it connects.

Show or hide a piece from a flow. To bring a layer on screen or take it off — a BRB screen for !brb, a banner for ten seconds after a reward — use the Show a layer and Hide a layer steps: Show or hide layers from a flow.

An older flow may still have a Show a goal step. That step has been retired, so the flow shows as needing attention until you remove it: switch the goal bar’s source to A number you keep first, then delete the step.

The Event stack widget shows your real Twitch polls, predictions, hype trains and ad breaks as they happen — React to polls, predictions and hype trains covers them. Four actions under Overlay stage one without anything really running on Twitch: Overlay poll card, Overlay prediction card, Show a hype train and Show an ad break. Each one puts its event on the widget from numbers your flow gives it — a poll’s choices and vote counts, a prediction’s outcomes and points, a hype train’s level and progress — remembers it for a widget that connects later, and steps aside while a real one of that kind is running on your channel.

Delete an overlay

An overlay you no longer use can be deleted from Overlays. It frees a place when your channel has all the overlays it can have.

Open Overlays.
On the overlay’s card, select the bin icon (Delete overlay…).
Read the question and press Delete overlay to confirm, or Cancel to keep it.

The card disappears from the list. Any Browser Source in OBS that used its URL goes blank, and the deletion cannot be undone. Alerts, chat and goal designs it showed stay on your channel for your other overlays. The same bin icon (Delete overlay…) is also under OBS URL in the editor’s top bar.

Delete several overlays at once

Open Overlays and tick the box on each overlay card you want to delete, or tick Select all above the cards.
Hold Shift and tick another card to take every card between the two.
Select the bin icon (Delete) in the bar above the cards. The question names how many overlays it covers; press Delete overlays to confirm. The cross icon (Clear selection) unticks everything instead.

Each overlay goes the same way as Delete an overlay: any Browser Source in OBS that used its URL goes blank, and it cannot be undone. An overlay that could not be deleted stays in the list and is named above the cards.

Group overlays into packs

A pack keeps overlays that belong together beside the flows that drive them, for example the screens and the alerts of one stream style. Group flows and overlays into a pack shows how to make one.

Open Overlays and choose the Packs tab. It lists every pack that holds at least one of your overlays. The toggle switches between All, Mine for the packs you made, and Marketplace for the packs you added.
Read a card's bar: one segment per overlay, solid for Published and outlined for Unpublished changes. The card offers Review in Studio when one of its overlays has changes OBS has not got yet, or says All published. Publish from Studio: review which parts go live, because the draft can include changes beyond this pack.
Select a pack to inspect it beside the library. Each overlay has the copy icon (Copy the OBS URL) for its Browser Source, the pencil icon (Open in Studio) and, in a pack you made, the minus icon (Remove from this pack). Also in this pack links to the pack's flows on Flows.

On the Overlays tab, a small chip on a card names the pack it is in; click it to open that pack. An overlay that came with a pack you added from the Marketplace is grouped under that pack by itself. Overlays in no pack are listed under Not in a pack at the bottom of the Packs tab, with Make a pack from these.

The Packs tab with search and source filters above a compact library containing Solo Adventure and On-screen numbers; the selected On-screen numbers inspector shows its publication state and Goal bar overlay, with loose overlays below. — Overlays → Packs: a pack you made with an overlay waiting to publish, beside a built-in pack, and the overlays in no pack. Click to enlarge.

If you cannot see anything

A transparent label with no content may look empty. Check its text and selected variable first.
An alert layer or event stack may be idle until an event arrives. Use the matching test in its editor where available.
A banner says Your old Alert box was retired: that widget had an Alert box, which alerts no longer use. Its settings were not carried over, so add the alert types you want from Add on the left of the editor, then Publish.
Make sure the source is visible and is above any full-screen capture that would cover it.
If an overlay URL stops working, overlays may not be available for your channel yet, or may just be temporarily unavailable — try again in a moment. Your flows still run, and the widget editor’s canvas still shows what the widget looks like.