HeatCheck
Log inStart free

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

Leave the same source or shared-window URL in your production setup between shows. Editing the saved arrangement changes what that URL renders; you do not replace it for each show.

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

Switching presets preserves the current widget order where possible. Widgets the new shape does not support, or that exceed its limit, are removed from the arrangement.

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

Widgets that depend on a feature — roll call, suggestions, polls — simply drop out of the layout when that feature is off or has no data, and the rest close up around them. The builder uses sample data when no show is live so you can still judge the complete layout; the public overlay URL stays quiet until real data is available.

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

An overlay’s color mode is saved on the overlay itself, and has nothing to do with whether you use HeatCheck in dark or light. OBS’s embedded browser does not provide a reliable viewer preference, so the saved overlay mode is the only palette the broadcast uses.

Build one

SettingsStream overlaysNew overlay
  1. 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. 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. 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. 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

Everything above works on any plan, and the preview is the same renderer your stream would use. What a paid plan adds is the address: on the free plan an overlay has no URL to copy, so the setup card describes what going on air would give you instead. See Plans and billing.

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

A forgotten source in an old scene renders nothing at all rather than putting an error page on air.

Previous

Roll call

Next

Add an overlay to OBS or Streamlabs