# Add an overlay to OBS

Create a hosted label, goal bar, event stack, poll, alerts, media, chat box, now-playing or giveaway panel and put it on screen.

Updated 27 October 2026

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

> **Pebble can walk you through it**
>
> Pebble’s **Set up your bot** tutorial adds your ready-made _My alerts_ overlay to your streaming app and watches an alert play, **Put your alerts on stream** does the same later if you put that step off, **Your first overlay** builds an alert and publishes it, and **Add a goal bar** puts a goal on an overlay you already have. Start either from [Tutorials](https://bloopbot.com/docs/tutorials).

![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.](https://bloopbot.com/docs/screenshots/overlays-list.jpg)

_Your overlays: one card per Browser Source, each with a live thumbnail, its publication status, and copy and bin icons._

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](https://bloopbot.com/docs/arrange-your-overlay#kinds)).

| 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](https://bloopbot.com/docs/reward-redemptions#sound) |
| 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](https://bloopbot.com/docs/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](https://bloopbot.com/docs/spin-wheel) |

![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.](https://bloopbot.com/docs/screenshots/overlays-add-door.jpg)

_Add to Overlays: Bloopbot’s ready-made overlays, each pictured in your theme._

![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.](https://bloopbot.com/docs/screenshots/new-overlay.jpg)

_New overlay: a name, and nothing else. It starts empty. Esc or a click outside closes it._

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](https://bloopbot.com/docs/arrange-your-overlay) walks through building one; [Put now-playing on stream](https://bloopbot.com/docs/now-playing-in-obs) 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](https://bloopbot.com/docs/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](https://bloopbot.com/docs/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](https://bloopbot.com/docs/widget-themes#scenes). 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:

1. **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.
2. **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.](https://bloopbot.com/docs/screenshots/overlay-template-clash.jpg)

_Adding Starting soon when you already have that screen: Restyle my screen is picked, and Add a new overlay is the other choice._

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

1. 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.
2. For a counter or live label, choose the variable or data field it should display.
3. 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.
4. 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.](https://bloopbot.com/docs/screenshots/draft-status.jpg)

_Waiting to publish: overlay and shared edits, Publish, and Discard changes…._

**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.](https://bloopbot.com/docs/screenshots/history-popover.jpg)

_History: every Publish is a version you can preview and restore into your draft._

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](https://bloopbot.com/docs/arrange-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”.](https://bloopbot.com/docs/screenshots/obs-url-popover.jpg)

_OBS URL: copy it for your Browser Source. New URL… and Delete overlay… each ask first._

1. In OBS, open the scene that should show the widget.
2. Add a **Browser Source** in Sources and give it a clear name.
3. Paste the copied overlay URL into the URL field. Overlays use a web URL, so leave **Local file** off.
4. 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](https://bloopbot.com/docs/alerts#several-scenes)).
5. 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](https://bloopbot.com/docs/vertical-overlays-twitch-dual-format).

Until you publish, OBS keeps showing the version it already has. Step 5 of [Arrange your overlay](https://bloopbot.com/docs/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](https://bloopbot.com/docs/widget-themes#scenes) lists which OBS scene each goes in, and [Import the scenes into OBS](https://bloopbot.com/docs/widget-themes#obs-import) adds all four at once.

> **Keep your source URL private**
>
> A widget URL includes its access key. Anyone with the URL can open that widget. If you rotate the key in the editor, replace the old URL in each OBS source that uses it.

## 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)` |

1. Install the pack and let the install prompt create `goal` and `wins`, its number variables.
2. 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.
3. 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.
4. Type the command in chat, or use **Test fire** on the flow, and watch the widget move.
5. 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.](https://bloopbot.com/docs/screenshots/widget-variable-panel.jpg)

_A goal bar following `goal`: one flow that is on changes it, and Open lists the paused ones too._

**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](https://bloopbot.com/docs/arrange-your-overlay#flow-show-hide).

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](https://bloopbot.com/docs/polls-and-predictions) 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.

> **Keep the two targets the same**
>
> The goal bar’s target lives on the widget. The **Goal: reached!** flow celebrates when the variable passes its own number, 100 to start with. If you change one, change the other.

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

1. Open **Overlays**.
2. On the overlay’s card, select the bin icon (**Delete overlay…**).
3. 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

1. Open **Overlays** and tick the box on each overlay card you want to delete, or tick **Select all** above the cards.
2. Hold **Shift** and tick another card to take every card between the two.
3. 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](https://bloopbot.com/docs/widgets-in-obs#delete): 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](https://bloopbot.com/docs/create-packs#overlays) shows how to make one.

1. 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.
2. 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.
3. 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.](https://bloopbot.com/docs/screenshots/overlay-packs-list.jpg)

_Overlays → Packs: a pack you made with an overlay waiting to publish, beside a built-in pack, and the overlays in no pack._

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