Layout and browser source
The last step: place the widgets on the Overlay builder → Layout tab, then take the whole thing into your streaming software.
The page
The Overlay builder works like a widget's page:
- General styles and Layout, the tabs over the editor, switch what it shows. General styles is the overlay style.
- The column on the left: on the Layout tab, Canvas, Positions and Widget placement. Positions and Widget placement open a second column beside it: the nine positions, or the widgets.
- The main area: the settings of the row you picked.
- Overlay list, the panel against the window's right edge: your overlays, the picked one's preview and its URL. The arrow at the top folds it to a slim rail. Drag its left edge to widen it, up to half the window; it keeps its width.
Several overlays
You can make more than one overlay — a landscape one and a vertical one, or one per scene. Each has its own URL, so each goes in its own browser source.
The Overlay list panel, against the window's right edge, handles them:
- Create a new overlay adds one, named Overlay 2, Overlay 3… It shows every widget switched on.
- The Overlay dropdown picks the one you are editing. Everything on the Layout tab, the preview and the URL below it are that overlay's.
- Its name is edited in place, under the dropdown (Untitled overlay when empty), with its canvas size next to it.
- Duplicate makes a copy — Main overlay (copy) — with the same layout and widgets.
- Delete asks first, and warns that any browser source pointing at its URL will stop working. The last overlay cannot be deleted.
The first overlay is called Main overlay.
| Per overlay | Shared by every overlay |
|---|---|
| Canvas size, spacing, the nine positions' settings, which widgets it shows, their position, order and size, the height of each bar | Widget settings, widget styles, the overlay style (General styles tab), the connection |
Which overlay runs the actions
Chat messages, sounds, Discord posts, shoutouts and every count (goals, subathon, Stream Counter, Viewer Counter, Chat First, Chat Activity Rewards, End Credits groups) are done by one overlay only, so nothing is ever sent or counted twice. By default it is the first overlay.
With more than one overlay, the box under the URL says which:
- On that overlay: This overlay runs the actions — Chat messages, sounds, Discord posts and counts of every widget switched on, shown here or not. Keep its browser source loaded: never tick "Shutdown source when not visible".
- On the others: Display only — Actions run in "Main overlay", with a Run the actions here button to move the role to the overlay you are looking at. Copy the URLs of both overlays again afterwards.
The overlay that runs the actions also runs, invisibly, every widget switched on that it does not show. A greeting shown only in your vertical overlay still posts its chat message once, from the overlay that runs the actions. Clip Autoplayer, the Emote and Gifs Wall and Timers only display, so each overlay showing them plays its own.
Display-only overlays follow what the overlay that runs the actions saves in Streamer.Bot: goals, the subathon, counters, viewer counts, Chat First, and the chat relay's and Polls & Predictions' pause. Deleting the overlay that runs the actions hands the role to the first one left.
Canvas
The Canvas row holds the overlay's size and its spacing.
Canvas size — match your stream's canvas: the base resolution in your streaming software's video settings (in OBS Studio, Settings → Video → Base resolution). Each overlay has its own.
| Preset | Size |
|---|---|
| 4K (3840×2160) | 3840 × 2160 |
| 2K (2560×1440) | 2560 × 1440 |
| 1080p (1920×1080) | 1920 × 1080 |
| 1080p vertical (1080×1920) | 1080 × 1920 |
The default is 1080p (1920×1080).
Then the spacing:
| Setting | Default | Detail |
|---|---|---|
| Distance from the edges | 24 px | Distance from the canvas edges, at 1080p. From 0 to 200. |
| Space between widgets | 14 px | Between two widgets sharing a position, at 1080p. From 0 to 80. |
Positions
The canvas has nine positions, as they are named on screen:
| Left | Centre | Right | |
|---|---|---|---|
| Top | Top left | Top centre | Top right |
| Middle | Middle left | Center | Middle right |
| Bottom | Bottom left | Bottom centre | Bottom right |
A position is as wide and as tall as the widgets in it, within the limits you set. The Positions row opens a column of the nine positions, each with Horizontal or Vertical under its name. Pick one (it is outlined in the preview) to set it in the main area:
| Setting | Detail |
|---|---|
| Horizontal / Vertical | Horizontal: the widgets side by side; a full row wraps onto a new line, never out of the position. Vertical: one under the other. |
| Horizontal | Left, Centre or Right: where the widgets sit across the position. |
| Vertical | Top, Centre or Bottom: where they sit from top to bottom. |
| Min width | 0 = as wide as its widgets. |
| Max width | 0 = up to the canvas edge. |
| Min height | 0 = as tall as its widgets. |
| Max height | 0 = up to the canvas edge. |
| Hide overflow | Cuts off what goes past the maximum size, instead of letting it spill. |
The first two are under Widget alignment, the sizes under Width and height. Each size is in px (at 1080p), % of the canvas, em, vw or vh, its unit picked beside its label; switching the unit converts the value. Default for this position puts the picked position back to its defaults.
By default every position is a column lined up on its own side and edge (Middle left: on the left, centred; Bottom centre: centred, at the bottom), at least 30 % of the canvas wide. Three are set apart:
| Position | Default |
|---|---|
| Top left | At least 20 % wide, at most 48 % of the canvas high, overflow hidden. |
| Top right | A row, at most 76 % of the canvas wide (counters, viewers and timers side by side). |
| Bottom right | At most 840 px high, overflow hidden. |
Horizontal bars
Chat Overlay, Goals & Subathon and the Scoreboard can also run as a horizontal bar: a full-width band along the top or the bottom of the canvas. In the widget's settings, Horizontal turns it on and Vertical off (Chat Overlay: Messages orientation; Goals & Subathon: Display mode; the Scoreboard: Orientation) — it is on by default for all three.
The nine positions share the room the bars leave, so a bar never covers another widget. Several bars on the same edge stack in the widget order. A Centre bar splits the canvas in two: the top and middle positions above it, the bottom ones below. Full-screen widgets (End Credits, the Emote and Gifs Wall) still cover the whole canvas.
In the Widget placement list, a bar reads Top bar, Centre bar or Bottom bar, and its settings are:
| Setting | Detail |
|---|---|
| Position | Top, Centre or Bottom. |
| Height | Fixed (default): the band keeps its height whatever the widget shows, so the positions never move. Auto: the band is as tall as what the widget shows, and takes no room while it shows nothing (the Scoreboard hidden, an empty chat): the positions then use that room. |
| Fixed height | With Fixed: height of the band, in px (at 1080p), % of the canvas, em, vw or vh, its unit picked beside the label. |
The bar's look is the widget's Container, the first card of its Style tab — see Appearance.
Widget placement
The Widget placement row opens a column of the widgets switched on, each with its position under its name (if none is, the main area says so and links to the Widgets page). The switch on each row shows or hides the widget in this overlay. Drag a row by its handle to change the order: widgets in the same position stack in this order. Click one to place it in the main area; it is highlighted in the preview. A full-screen widget has nothing to place.
| Setting | Default | Detail |
|---|---|---|
| Position | per widget | One of the nine positions. |
| Width | per widget | Width in px (at 1080p), % of the canvas, em, vw or vh, its unit picked beside the label. 0 = the position's width (in a row: as wide as its content). |
| Scale | 100 % | Size multiplier. From 50 to 250. |
| Nudge horizontally | 0 px | Fine offset from the position. From -400 to 400. |
| Nudge vertically | 0 px | Fine offset from the position. From -400 to 400. |
Default for this widget puts one widget's position, width, size and nudges back to their defaults, without touching the others.
The default positions:
| Widget | Position | Width |
|---|---|---|
| Chat Overlay | Bottom bar, 50 px high (Bottom right without the bar) | full width |
| Chat First | Bottom right | 0 |
| Chatter Greeting | Bottom right | 0 |
| Chat Activity Rewards | none — nothing to show | — |
| Emote and Gifs Wall | full screen | — |
| Shoutout | Center | set by the player (800 px, on its Background style) |
| Clip Autoplayer | Center, off | set by the player (1280 px, on its Background style) |
| Alerts | Bottom centre | 0 |
| Goals & Subathon | Top bar, 100 px high (Top left without the bar) | full width (380 px without the bar) |
| Stream Counter | Top right | 0 |
| Viewer Counter | Top right | 0 |
| Polls & Predictions | Top left | 0 |
| Timers | Top right | 360 px |
| End Credits | full screen | — |
| Discord Webhooks | none — nothing to show | — |
Checking before you go live
The Overlay list panel shows the picked overlay at its canvas size. Two controls help:
- Show positions, over the preview on the Layout tab, draws the nine position guides over it.
- Play demo events, under the preview, fires a sample event into every widget the overlay shows, so you can see the whole overlay move without waiting for a real viewer. It plays again when you pick another overlay.
Adding it to your streaming software
It works in OBS Studio, Streamlabs Desktop, Meld Studio, XSplit and any other app with browser sources. Do this for each overlay.
Copy the URL
Under the preview, in Browser source URL, click Copy. Open in a new tab shows the overlay alone in your browser. The settings part of the URL shows as dots, so it never appears on a shared screen: the eye button (Show URL / Hide URL) reveals it, and Copy always copies the full URL.
Create the source
In your streaming software, add a browser source and give it a name.
Paste and size it
Paste the URL, then set the width and height to the overlay's canvas size — the hint tells you which, e.g. 1920 × 1080 for 1080p, 1080 × 1920 for vertical. If your browser source has a Refresh browser when scene becomes active option, leave it unchecked.
Close the tab
The overlay works on its own. You can close the website: it is Streamer.Bot, on your PC, that feeds it.
One widget on its own
To place a widget in a scene of its own, switch off Add to overlay next to its page title: it leaves every overlay, and its own Browser source URL appears under the preview. While the switch is on, the page reads To use it as its own browser source, switch off "Add to overlay". — so a widget never shows twice on stream.
When the overlay shows a message
| Message | What to do |
|---|---|
| Connecting… | Streamer.Bot is not reachable yet: start it and its WebSocket server. The overlay keeps trying on its own. |
| This browser source has no settings. | The URL was cut short: copy the full URL from the Overlay builder again. |
| The settings in this URL could not be read. | Same: copy the URL again from the Overlay builder. |
The controls window
Every widget's manual controls — skip an alert, clear the chat, +1 on a counter, start the subathon… — in one window, beside your overlay rather than on it. Its URL is under the overlay's, in Controls window:
Every widget's manual controls in one window. Add it as a custom dock in your streaming software (OBS Studio, Streamlabs Desktop, Meld Studio…), or open it as its own browser window.
There is one controls window for all your overlays: its buttons go through Streamer.Bot to every browser source at once. With several overlays, its URL is under the one that runs the actions; the others say Display only.
In OBS Studio: Docks → Custom Browser Docks, give it a name and paste the URL. Like the overlay's, this URL holds your settings: copy it again when it reads Settings changed since you copied this URL, and never show it if you use a Streamer.Bot password.
The window shows one group per widget switched on, in the widgets' order. It only knows the widgets switched on when you copied its URL: after switching one on, copy the URL again. It connects to Streamer.Bot on its own, and its header shows the connection status. The gear opens Display options:
| Option | Detail |
|---|---|
| Display | Stacked (every group under its heading, the default) or Tabs (one group at a time; a dropdown when the window is narrow). |
| Controls shown | One switch per widget, to leave out the groups you never use. |
Saved in this window only: each dock or window keeps its own choices. The same controls are on each widget's page, in its Controls tab.
| Message | What to do |
|---|---|
| No controls here: switch on a widget that has some. | None of the widgets switched on has controls. |
| Every control is hidden. | Open Display options and switch some back on. |
| This window has no settings. | The URL was cut short: copy the controls URL from the Overlay builder again. |
Why you have to copy the URL again
Your settings are saved in your browser's local storage. Your streaming software is a different program: it cannot read that storage.
The whole configuration is therefore compressed and placed in the URL hash — the part
after the #. Only values that differ from the defaults go in, and only for the widgets
that browser source shows or runs, which keeps the URL reasonable. The images you upload
(an alert's picture, a timer's, an achievement badge) are not in it: they are saved in
Streamer.bot, and the browser source reads them from there.
What follows, in order of importance:
- A URL pasted into a browser source is a snapshot. It holds the settings as they were when you copied it. Change an alert text and the overlay keeps showing the old one until you copy the URL again. Under the preview, Settings changed since you copied this URL warns you when the picked overlay's copied URL is out of date: Copy it again and paste it into your browser source to update it. A widget setting changes every overlay's URL, so copy each of them again.
- Your Streamer.Bot password never leaves your PC. A URL hash is never sent to the web server — it is the part of an address the browser keeps to itself.
Goal counts, the subathon clock and the other saved values are the exception: they live in Streamer.Bot (through the Stream UI - Backend action), so they carry on whichever URL you paste.
Backing up your settings
Browser storage disappears if you clear the site's data, change machine or change browser. Keep an export: the Back up your settings button, next to the Overlay builder's title, leads to the Connection page's Backup tab. It holds every overlay.