OBS overlays for streaming

NextSet includes three ready-made overlay pages you can drop straight into OBS as browser sources. They show your live timer, current performer, and what's up next — all updating automatically, in sync with the director, with no extra setup.

The three overlays

Each overlay is a separate URL. All three have transparent backgrounds, so they layer cleanly over your camera feed or game capture without any chroma key.

Replace <eventId> with your event's ID (see Finding your event ID below).

Full example URLs look like:

https://nextset.ca/obs/clxyz123abc/timer
https://nextset.ca/obs/clxyz123abc/lowerthird
https://nextset.ca/obs/clxyz123abc/full

Finding your event ID

The event ID is the long string in your event's URL when you're in the director or dashboard. It looks like clxyz123abc — a mix of letters and numbers, roughly 25 characters.

You can find it by:

1. Opening your event in the NextSet dashboard.
2. Looking at the URL in your browser's address bar. The ID is the segment after /event/ or listed in your event settings page.

The overlay URL uses your event ID, not your venue name or event name. If you paste the venue name or event name into the URL it won't load.

Adding an overlay in OBS

1. In OBS, click the + button under Sources and choose Browser.
2. Give the source a name (for example, "NextSet Timer").
3. Paste the full overlay URL into the URL field.
4. Set Width to 1920 and Height to 1080 (or match your canvas resolution).
5. Check Shutdown source when not visible if you want the overlay to pause when the scene isn't active.
6. Click OK.

Repeat for any other overlays you want. Each overlay is its own browser source — you can stack the timer and lower third in the same scene if you like.

Transparency in OBS

The overlays are already transparent — you don't need to set up chroma key. OBS reads the transparent background directly from the page. Just make sure the browser source is layered above your video/camera source in the Sources list.

If the overlay appears on a black or white background instead of transparent, open the browser source properties, scroll down to Custom CSS, and add:

body { background-color: rgba(0,0,0,0); }

Stream delay compensation

If your stream has a broadcast delay, you can shift the overlay's timer to match by adding a delayMs parameter to the URL:

https://nextset.ca/obs/clxyz123abc/timer?delayMs=10000

10000 is 10 seconds in milliseconds. Adjust the number to match your stream's delay so viewers see the right time even with a buffer.

How the overlays stay current

The overlays connect to your live event automatically. When the director starts a new item, pauses, or advances to the next performer, every overlay updates on its own — you don't touch OBS at all. There's nothing to refresh or reconnect during the show.

The connection status dot (green = connected, red = disconnected) is visible in the timer and full overlays while you're setting up. Once you go live you can ignore it.

Common problems

The overlay shows nothing / a blank page. You're most likely using a venue name or event name in the URL instead of the event ID. Copy the ID from your event's URL in the dashboard (the long alphanumeric string) and rebuild the overlay URL using that.

The overlay background is black, not transparent. OBS sometimes needs a nudge. Open the browser source properties, add body { background-color: rgba(0,0,0,0); } to the Custom CSS field, and click OK.

The timer in the overlay doesn't match my stream delay. Add ?delayMs=<milliseconds> to the end of the overlay URL. For a 15-second delay use ?delayMs=15000.

The overlay loaded once but the timer isn't updating. The overlay has lost its connection. In OBS, right-click the browser source and choose Refresh — it reconnects immediately and picks up the current state. This usually only happens if the computer went to sleep or the network dropped briefly.

The lower-third shows "NextSet Live" instead of a performer name. No performer has been set as the current item in the director view yet. Once the director starts a rundown item, the performer's name appears automatically.

I want just the timer, not the mode label. Use the /timer overlay and resize it in OBS with the Transform tools — you can crop and scale the source to show only the part you want.