# Reuse your widgets in every overlay

Keep your custom widgets on the Widgets page, place one on any overlay from Studio's Add tab, edit it once for every overlay that shows it, and add or share widgets on the Marketplace.

Updated 9 October 2026

## Before you start

A **widget** is one piece you can place on an overlay. Bloopbot's own widgets, such as the chat box, the goal bar and each alert, are built in. A **custom widget** is one you wrote, or one you added from the Marketplace. It is kept once, on the **Widgets** page, and every overlay that shows it shows that same widget: change its code once, publish, and every one of those overlays changes.

Each place a widget appears on an overlay is a **layer**. A layer keeps its own position, size and settings, so the same raid card can be big on one overlay and small on another, with a different accent colour on each.

You need an overlay to open in Studio. Writing a widget's code is covered in [Author a custom graphic](https://bloopbot.com/docs/author-custom-graphics); this guide is about keeping and reusing what you make.

## 1. Make a widget

1. Open **Overlays**, then **Open in Studio** on any overlay.
2. Choose **Add** at the top of the left panel.
3. Press **New widget** at the foot of **Add**. It stays outside the categories and the search, so it is always there.

Studio makes a widget on your **Widgets** page, starting from a raid card, and places it on this overlay as a layer called **Custom widget**. Select the layer and press **Edit widget code** in the **Widget** section to change it: [Author a custom graphic](https://bloopbot.com/docs/author-custom-graphics#code) walks through the code workspace.

Choosing **Edit code** on a built-in layer, such as a Label, also makes a widget: a copy of that built-in's code, which no longer gets Bloopbot's fixes. **Reset to built-in** turns only that layer back; the copy stays on your **Widgets** page.

## 2. Place it on another overlay

1. Open the other overlay in Studio and choose **Add**.
2. Your widgets sit inside the list, each beneath the built-in widget it is listed under. Every built-in row has an arrow beside its **Add** button: press it to see the built-in’s example and any widgets listed under it. Select the row’s name to open the same full gallery in the left panel, with one full-width card per row. It includes every widget listed under that type, even when your search matched only one. **Back**, or **Esc**, returns to your filtered list. A row with your widgets shows their count. Widgets listed under no built-in are in **More**, at the end of their section.
3. Each card shows a rendered example, its name, **Built-in**, **Yours** or **Installed**, and, for your widgets, how many overlays use it. A card that cannot draw an example shows its icon.
4. Select a widget to put it in the middle of the canvas, or drag it to where you want it.

![Studio’s Add tab: the Raid alert row opened on Raid card, tagged Yours and Used in 2 overlays, and More under Media holding Sponsor loop.](https://bloopbot.com/docs/screenshots/studio-add-drawer.jpg)

_Add with the Raid alert row open on its built-in example and Raid card, tagged Yours, and Sponsor loop in More under Media._

**Find a widget…** searches your widgets by name too, and opens the rows that hold them. The categories (**Alerts**, **Media**, **Chat & info**, **Goals & games**) show your widgets with the built-ins of that section. The square arrow at the end of a widget's row opens it on the **Widgets** page in a new tab.

## 3. Edit it once for every overlay

Select a layer that shows one of your widgets. Above its settings, a note says how many overlays use the widget, for example **Used in 2 overlays.**

1. Press **Edit widget code** in the **Widget** section and make your change. It saves to your draft as you type.
2. Choose **Back to Studio**. Every layer that shows the widget, on this overlay and on the others, already shows the change in Studio.
3. Press **Publish**. Every overlay that shows the widget changes in OBS.

![The settings of a layer showing Raid card: Used in 2 overlays, Make a separate copy, Open in Widgets, and Edit widget code under Widget.](https://bloopbot.com/docs/screenshots/widget-layer-banner.jpg)

_A layer showing Raid card: Used in 2 overlays, Make a separate copy, Open in Widgets and Edit widget code._

A layer's own settings, such as an accent colour or which flow messages it reacts to, stay with that layer: changing them on one overlay leaves the others as they are. The code, the settings it offers and its examples belong to the widget. **Open in Widgets** in the same note opens the widget in the code workspace.

## Choose where it is listed

**Listed under** decides which row of Studio's **Add** list a widget sits beneath. It changes nothing about what the widget does.

1. Open **Overlays**, then the **Widgets** tab, and select the widget's name.
2. The code workspace opens immediately. Choose **Data & settings**, then **Widget**. Open **Listed under** and choose a built-in widget, such as **Raid alert** or **Wheel**, or a section's **More**.

![Raid card’s code workspace, with Widget name, icon, Listed under, Shown on and History in Data & settings](https://bloopbot.com/docs/screenshots/widget-detail.jpg)

_Raid card’s code workspace: Widget settings with its name, icon, Listed under, the overlays that show it and History._

It applies at once, with nothing to publish. **Automatic** lists a copy of a built-in's code under that built-in, and a widget that uses a built-in's data, such as a wheel, a leaderboard or a Twitch goal, under that built-in. Everything else goes in **More** under **Chat & info**, a new widget included.

## Give it an icon

1. On the **Widgets** page, select the widget’s name or its pencil (**Edit**). In the code workspace, open **Data & settings**, then **Widget**, and press the icon (**Change widget icon**).
2. Under **Icons**, pick one, or search with **Find an icon…**. Or choose **Your pictures** and pick a PNG or WebP from your media library, or upload one.

![Icon for Spin timer: Icons and Your pictures, a search for rocket with the matching glyphs, No icon and Cancel.](https://bloopbot.com/docs/screenshots/widget-icon-picker.jpg)

_Searching the widget icons for rocket._

The icon shows in the **Add** list and on the **Widgets** page, and Studio shows it on the layer's row and in its settings. **No icon** puts back the plain one. It applies at once. A picture used as an icon can't be deleted from your media library until you choose another icon.

## The Widgets page

Open **Overlays**, then the **Widgets** tab beside **Overlays** and **Packs**. Each widget shows its icon, its name, **Made by you** or **Installed**, how many overlays use it, and **Edited, not published** or **Deleted when you publish** while your draft holds a change to it. An installed widget with a newer version waiting shows **Update ready**.

![The Widgets tab: Raid card (Made by you · Used in 2 overlays), Spin timer and Sponsor loop marked Edited, not published, each with its icon, Edit and delete buttons, below Publish… and Discard draft….](https://bloopbot.com/docs/screenshots/widgets-page.jpg)

_The Widgets tab: each widget with its icon, where it came from, how many overlays use it and what your draft holds for it._

- Select a name or press its pencil (**Edit**) to open the code workspace directly.
- In **Data & settings → Widget**, edit **Widget name** and press **Save name**, change its icon or choose **Listed under**. These changes apply at once; layers keep their own names.
- The code opens on a blank canvas that plays the widget’s examples. Choose **Back to widgets** when you have finished.
- **Publish…** and **Discard draft…** at the top act on your whole Studio draft, as they do in Studio.

## Go back to an earlier version

Each time you publish a change to a widget, its page keeps the version under **History**, the last 50 of them.

1. Open the widget from the **Widgets** page, then choose **Data & settings → Widget**.
2. Under **History**, press the restore icon (**Restore version 3**, for example) beside the version you want.
3. The version goes into your draft, and every overlay that shows the widget shows it in Studio. Choose **Back to widgets**, then press **Publish…** to put it live.

## Make a separate copy

To change a widget on one overlay only, give that layer its own copy.

1. In Studio, select the layer.
2. Press **Make a separate copy** in the note above its settings, then **Make a copy**.

Your **Widgets** page gets a widget with the same name and _copy_ after it, such as **Raid card copy**, and only this layer shows it. Changes to one no longer reach the other. A sealed widget can't be copied.

## Delete a widget

1. On the **Widgets** page, press the bin beside the widget, or **Delete…** on its page.
2. The warning lists every overlay that shows it: its layers are removed from them. Press **Delete widget**.
3. The widget and its layers stay on stream until you publish, and **Discard draft…** brings them all back. Press **Publish…** to delete it for good.

![Delete Raid card?: it is on 2 overlays, Gameplay and Be right back, whose layers are removed; it stays on stream until you publish; Cancel and Delete widget.](https://bloopbot.com/docs/screenshots/widget-delete-warning.jpg)

_The warning before a delete lists every overlay that loses the widget._

## Widgets from the Marketplace

Some Marketplace items are widgets on their own: choose **Widgets** in **Discover** to see them. An overlay you add can bring widgets with it, too.

1. Open the widget's page and press **Add**. It goes onto your **Widgets** page as **Installed**.
2. Under the steps to set it up, **Add to an overlay** lists your overlays: pick one and press **Add to an overlay**. The widget lands in that overlay's draft at the spot you pick under **Where on the overlay** (top left to start). Open the overlay in Studio to move it, then **Publish**.

You can place an installed widget from Studio's **Add** list too, like one of yours, under the row its creator listed it under.

When its creator publishes a new version, the item moves to **Update ready** under **Installed**, and the widget shows **Update ready** on your **Widgets** page. If you haven't changed the widget, **Update** puts the new version in your draft; publish to put it live. If you changed its code, the update asks first: **Keep mine**, chosen to start with, keeps your version, and **Use the new one** puts the creator's version in your draft. Either way your layers keep their own settings. See [Update what you added](https://bloopbot.com/docs/the-marketplace#update).

A **sealed** widget's creator keeps its code private: you can place it, change the settings it offers and take its updates, but not see, edit or copy its code. See [Sealed graphics](https://bloopbot.com/docs/author-custom-graphics#sealed).

## Share a widget on its own

1. Give the widget at least one example: open its code and use the **Examples** tab ([Give it examples and a demo](https://bloopbot.com/docs/author-custom-graphics#examples)). A widget shared on its own is previewed from its examples, and can't be shared without one.
2. Open **Marketplace**, then **Made by you**, and choose **Share…**, then **Submit for review…**.
3. Under **Widgets**, tick the widget. Carry on as in [List a widget on its own](https://bloopbot.com/docs/publish-to-the-marketplace#widgets).

When you share an overlay, every widget it shows comes along as a widget of its own, with its icon and where it is listed. You can share the widgets you made; an installed widget stays with its creator's listing.

## Ask an assistant

A [connected AI assistant](https://bloopbot.com/docs/connect-an-ai-assistant#widgets) allowed to edit your overlays can list your widgets, make one, put it on an overlay, change its code once for every overlay, restore a version, make a separate copy, rename it, give it an icon and choose where it is listed. It can't read or change a sealed widget's code. Its code changes wait in your draft until you publish, or until the assistant publishes with your go-ahead.

## If something looks wrong

- **My change shows on only one overlay** — the other overlay's layer may show a separate copy: select it and read the name in its note. Or the change isn't published yet: press **Publish**.
- **I can't find my widget in Add** — open the row it is listed under, or **More** at the end of its section, or search for its name. Check **Listed under** on its page. A widget deleted in your draft is left out until you publish or discard.
- **Edit widget code isn't there** — the widget is sealed. Its creator's listing is the only place its code changes.
- **A picture won't delete from my media library** — a widget uses it as its icon or in its code. Choose another icon, or change the code and publish.