On your stream
8 min
Stream overlays
Build a reusable broadcast graphic, choose its live widgets and appearance, and connect it to OBS, Streamlabs, or Streamyard.
What an overlay is
An overlay is a web page that shows part of your live show as a broadcast graphic — and a URL you paste into your streaming software once.
The important thing about that URL is what it is attached to. It belongs to you, not to a particular show. Paste it into OBS in January and it will still be correct in December: it always shows whatever you have live right now, and goes quiet when you are off air.
Set it up once, forget it exists
You can have up to 24 overlays. Most hosts end up with two or three: one for the main scene, one for a break screen, maybe one for a results moment.
Pick a shape
An overlay’s size determines where it fits, which widgets are available, how many list rows can be shown, and whether the gauge is drawn as an arc or a horizontal scale.
Lower third
1920 × 220
- A slim full-width strip along the bottom. Sits under your main content and holds up to 4 glanceable widgets. It does not support the roll-call or suggestion lists.
Corner card
480 × 320
- A small floating card. The right choice for a permanent gauge or station identifier. Holds 2 glanceable widgets; list widgets are not available at this size.
Side panel
520 × 760
- A medium panel with room for a list. The everyday choice for an interactive show. Up to 4 widgets, 8 rows of names.
Full-height rail
420 × 1080
- A narrow column running the whole screen height. Fits the most rows in the least width — 14 of them. Up to 5 widgets.
Half screen
960 × 1080
- Half the canvas, to pair with a shrunken video feed for an interview or a call-in segment. Up to 5 widgets.
Full screen
1920 × 1080
- The whole canvas, laid out as a grid. A break screen, an intermission, or a dedicated results moment. Give it its own scene. Up to 7 widgets.
Streamyard callout
557 × 1080
- The one shape for Streamyard, which has no browser source. You open it as an ordinary browser window and share it in. Up to 5 widgets.
Changing shape keeps your work
Choose what it shows
Under What it shows, switch on the pieces you want and drag them into the order they should appear. Order is yours — the overlay renders them top to bottom, or left to right, exactly as you arrange them.
Interest gauge
- The live meter and its 0–10 reading.
Segment
- What the room is rating right now.
Audience
- How many people are in the room, and how many have voted.
Roll call
Needs roll call on
- Who checked in, in the order they arrived.
Listener suggestions
Needs suggestions on
- The most-upvoted segments your listeners suggested.
Live poll
Needs a poll open
- The running poll and its results, as they come in.
Join call-to-action
- Your public page link and a QR code viewers can scan to start voting.
Your logo
Needs a logo uploaded
- The logo from your branding settings, as a station ident. If you have not uploaded one in Custom Branding, this widget renders nothing at all.
A widget with nothing to say disappears
Colors, mode and backdrop
Use the three controls under Look to match the graphic to the footage or scene behind it.
Colors
HeatCheck · Your brand
- Your brand repaints the overlay in your accent color and gauge ramp from Custom Branding. Set independently of your listener page, because an overlay sits on top of your video and may need to fight a different background.
Color mode
Dark by default
- Start with Dark for light text over typical video. Choose Light when dark text has better contrast against a bright studio, whiteboard, slide deck, or paper-like break screen.
Backdrop
None · Scrim · Solid
- None is fully transparent and the default. Scrim puts a soft wash behind each widget, for bright or busy video where text on transparent stops being readable. Solid is an opaque fill, for a dedicated break scene or a capture chain that cannot carry transparency. Streamyard window overlays are always Solid.
This is a per-overlay setting, not your app theme
Build one
- 1
Name it for where it goes, not what it is
“Lower third — main scene” beats “Overlay 2”. You will be reading this name in a list six months from now while looking for the one that is already in a scene.
- 2
Pick the size, then the widgets
Choose the destination shape first because each preset has its own widget list and limit. Then enable the widgets and drag them into their broadcast order.
- 3
Watch the preview
The preview is the same renderer the real overlay uses, scaled into a 1920×1080 stage — not a mock-up. If a show is not live it fills in sample data so you can see the layout, but the layout itself is exactly what goes out.
- 4
Create it, then follow the setup card
Saving reveals a setup card with your URL and the exact numbers to type into your streaming software. Which steps it shows depends on the shape you picked — a browser source and a shared window have almost nothing in common.
Building is free; the URL is the Pro step
From there, follow the walkthrough for OBS or Streamlabs, or Streamyard.
Editing an overlay that is already live
You can. Edit and save, and the change reaches your stream within about a minute. The URL and source dimensions do not change, so there is nothing to replace in your streaming software.
Preview the revised arrangement before saving, and allow for the update delay if you edit while live. A change made between segments can update the existing source without interrupting the broadcast.
- Duplicate copies an overlay, including its arrangement, with a new URL. The fastest way to make a matching pair for two scenes.
- Delete is how you revoke a URL. An overlay code is unguessable but not secret — it only ever shows what your public page already shows — so deleting the row is what turns it off.
A deleted overlay goes quiet, it does not break