Stream Overlay

A Stream Overlay combines this site's OBS widgets and third-party web pages into one browser source: lay out what goes where in each scene in the dashboard, and add just that one source in OBS.

What it solves

Once you have a few widgets, OBS ends up with a row of browser sources: one for the goal bar, one for alerts, one for a counter, each with its own URL and its own size, and every scene change means checking that nothing was missed. A Stream Overlay puts them all on one canvas, and position, size, stacking order and volume are all set in the dashboard.

Getting started

1. In the scene toolbar at the top of the Layout tab, add a scene and pick a canvas size (1920 × 1080 landscape by default).
2. Add layers: pick one of this site's widgets, or paste the address of a third-party web page.
3. Drag on the canvas to set position and size. Next to the canvas (on the right when the screen is wide enough, otherwise below it) are the layer list (stacking order) and the selected layer's properties (such as volume).
4. Save, copy the overlay URL from the OBS source tab, and add it in OBS as a browser source, with its width and height set to the scene's canvas size (for example 1920 × 1080).

Streamlabs Desktop, Meld and other streaming software that supports browser sources can use it too; automatic scene switching just isn't guaranteed there, see "Using other streaming software" below.

Scenes and the canvas

One overlay can hold several scenes, for example one each for "intro", "in game" and "just chatting". Free channels can create 3 scenes, Pro channels 20.

Switch between scenes with the scene dropdown at the top of the Layout tab; rename and delete are right next to it.

Each scene picks its own canvas size: 1280 × 720, 1920 × 1080, 2560 × 1440 or 3840 × 2160, each in landscape or portrait (portrait just swaps width and height, for example 1080 × 1920). Set the OBS browser source's width and height to that same canvas size so positions and sizes in the dashboard match what you see in OBS.

Layers can hang partly off the canvas, just like in OBS: the dimmed area around the canvas isn't visible in OBS. Every layer has to keep a small part inside the canvas, so you can't drag one out of reach. When you switch between landscape and portrait, only layers that end up entirely outside the canvas, or with just a sliver inside it, are moved back in; the rest stay where they are.

While you drag or resize, layers snap to the canvas edges, the canvas center lines and other layers (hidden layers don't count), and a guide line shows where they snapped. Hold Alt while dragging to skip snapping for that drag; to turn it off or change the sensitivity, use "Snapping" in the scene toolbar. These settings are stored in your current browser only and aren't saved with the overlay.

Layers

Each layer holds one thing, of two kinds:

• A widget from this site. Its name comes from the widget itself, so you don't name it. Every layer can have its position, size and visibility adjusted, and its stacking order changed (the higher in the list, the higher on screen). Volume can be set or muted per layer, and it is multiplied with the widget's own volume setting, not a replacement for it.
• A third-party web page. Paste the address to embed it; a name is optional. The address is hidden in the dashboard by default, and "Show URL" reveals it. You can't set a third-party page's volume here: change it on that site, or add the page as its own separate browser source if you need to control it independently.

The layer limit applies to each scene separately: 15 layers per scene for free channels, 150 per scene for Pro. Filling up one scene doesn't stop you from adding layers to another.

A scene can't hold two identical widgets (that option is disabled when you add a layer). Different scenes can each contain the same widget, and when you switch between them it stays where it is and only its position and size change, without reloading.

Heavier widgets such as the coin pusher and the throwing widget get a reminder that they are better as their own OBS source. It's only a reminder, not a rule.

Downgrades and going over the limit

Downgrading a plan never deletes your data. Scenes and layers beyond the new limit keep their settings but stop showing, and they come back automatically when you upgrade again; you can also delete the ones you don't need. While you're over the limit you can't add more, but deleting and editing what already exists still works.

Can a third-party page be embedded?

Some sites don't allow themselves to be placed inside someone else's page, and embedding them just gives a "refused to connect" style error screen or a blank area. That rule is set by the other site and we can't reliably check it for you in advance, so when you add a third-party layer the dashboard lets you preview how it actually embeds:

• If the preview displays normally, it can be embedded.
• If the preview shows an error screen or stays blank, the site doesn't allow being embedded. OBS's browser follows the same rules, so it will look the same in OBS.

For a third-party layer that already exists, you can preview it again from its Layer properties. The preview is only there so you can see the result first; it never stops you from saving. A few more things to know:

• Addresses starting with http:// are usually blocked inside OBS; use https:// where you can.
• Tools on your own machine (localhost addresses) are only visible on the computer that runs them. If your streaming software runs on the same computer as the tool, it usually works; the dashboard preview runs in the browser you're using right now, so if you can't see it there, confirm in OBS.
• ChiwaBots addresses (overlay URLs and widget URLs) can't be added as third-party pages: the dashboard won't preview or save them. Add this site's widgets with the "ChiwaBots widget" option instead.

Switching automatically with your OBS scene

With "Switch by OBS scene name" turned on in the Auto switching tab, when OBS changes scene the overlay switches to the scene with the same name. Matching ignores leading and trailing spaces and letter case. When OBS switches to a scene with no match, you can choose whether the overlay falls back to the default scene or hides everything.

You only need to set it up once (the same guide is also in the OBS source tab):

1. Add a browser source in OBS, paste the overlay URL, and set its width and height to the canvas size.
2. In your other OBS scenes, add the same source with "Add Existing". Creating another new source makes a second, separate instance: duplicate connections, and alerts play twice.
3. In the source properties, set "Page permissions" to "Read user information" (the wording may differ slightly between OBS versions). That lets the overlay know the current scene the moment it loads. With lower permissions it only lines up after the next scene change. Don't set it any higher. Third-party pages inside the overlay are part of the same source and get the same permission. Higher levels can switch your OBS scenes and the highest one can stop your stream, so raising it hands those abilities to every site you embed.
4. Turn off "Refresh browser when scene becomes active" and "Shutdown source when not visible", so widgets aren't reloaded on every switch.
5. Give your OBS scenes the same names as the overlay's scenes.

Only switches on the Program output count. Changing the preview scene in Studio Mode doesn't trigger it.

Using other streaming software

Streamlabs Desktop, Meld and other streaming software that supports browser sources can use a Stream Overlay, but automatic scene switching may not work there. Use each scene's own fixed URL instead: the OBS source tab lists every scene's own URL (the scene toolbar can also copy the current one), so add one source per scene in your streaming software and each shows only that scene.

Common misconceptions

• Don't add the same widget both on its own in OBS and inside a Stream Overlay. That gives you two copies: alerts play twice and thrown items are thrown twice. Once you move to the overlay, remove the standalone source you had before.
• A working preview doesn't guarantee OBS looks the same. The preview runs in your browser; what you actually see in OBS is the final word.
• A third-party page's volume isn't controlled here. Per-layer volume and mute only apply to this site's widgets.
• If automatic switching does nothing, check the source settings and the names first. The usual causes are "Refresh browser when scene becomes active" still being on, other OBS scenes holding a new source instead of the existing one, or OBS scene names not matching the overlay's scene names.

Settings

The text below is taken from the in-app help, so it stays in sync with the actual interface.

Other notes

• Drag a layer to move it and drag its corners to resize. Positions and sizes are in canvas pixels, matching the browser source size in OBS. Layers can hang partly off the canvas; the dimmed area isn't visible in OBS, but every layer has to keep a small part inside the canvas.

Other settings

These settings have no additional help text in the dashboard; only their names are listed here.

• When OBS switches to a scene with no match
• Show the default scene
• Hide everything
• Not set (first scene)
• Canvas size
• Orientation
• Volume
• Adjust the volume on the source website. If you need separate control, add it as its own browser source.