Skip to main content
Back to Racey School
8 min read
Broadcasters, commentators, and production staff

Broadcaster Guide

Stand up overlays quickly, understand tokenized URLs, and verify what your stream team actually needs on race day.

Find the overlay console and copy usable URLs
Set up OBS scenes and real-time feed checks
Know which overlays fit each broadcast moment
Use this guide during beta
1
Load at least two overlays in OBS or a browser source
2
Validate real-time updates and fallback behavior
3
Confirm broadcaster permissions match expectations
Open quick reference

You're the one bringing races to life for viewers. Racey provides six real-time broadcast overlays designed to drop straight into OBS (or any streaming software that supports browser sources). This guide walks you through setup, configuration, and troubleshooting.


Getting Set Up

Getting the broadcaster role

Your league admin assigns you the Broadcaster role through League Settings > Staff Management. Once assigned, you get three permissions:

PermissionWhat it unlocks
broadcast.accessAccess the broadcaster dashboard and tools
broadcast.overlayView and manage overlay URLs
analytics.viewView broadcast and league analytics

You'll see a new Broadcast section in your navigation once the role is active.

Plan requirement

Broadcast overlays require a Pro or Enterprise plan. Free-tier leagues don't have access to the overlay system. During the 90-day trial, overlays are available — so your league can test them before committing.

The six overlay types

Racey ships with six broadcast overlays, each designed for a different purpose:

1. Timing Tower

The classic position tower on the left side of the screen. Shows every driver's position, gap to the leader, fastest lap indicator, pit status, and DNF status. Includes car number, driver name, and a team color stripe.

Customization:

  • theme=dark or theme=light — controls background and text colors
  • rows=1-20 — how many drivers to show (default: 20)

2. Championship Standings

A lower-third strip (bottom 80 pixels) showing the championship standings as a bar chart. Each bar uses the driver's team color. The leader is highlighted in yellow. Shows position, driver name, and points.

3. Driver Card

A featured driver popup in the lower-left corner. Slides in with a smooth 700ms animation. Displays the driver's number, name, team, and key stats (starts, wins, podiums, championship position and points). If the driver has a profile photo, it's shown; otherwise you get a number/nationality fallback.

Customization:

  • driverId=<userId> — override which driver is featured. Without this, Racey auto-selects the fastest lap holder or race leader.

4. Incident Ticker

Recent stewarding notices and broadcast updates in the bottom-left area. Shows up to 3 incidents at a time, color-coded by severity:

SeverityColorUse case
InvestigationYellowIncident under review
PenaltyRedPenalty applied
WarningAmberOfficial warning issued
NoteBlueGeneral broadcast note

Each entry shows the lap number, incident message, and severity label. New items slide in from the left.

5. Fastest Lap

A stinger overlay in the top-right corner that highlights the current fastest lap holder. Shows the driver's name, lap time, delta to the second-fastest lap, and which lap it was set on. Uses a purple/fuchsia gradient background. Appears and disappears dynamically based on fastest lap data.

6. Battle Tracker

Displays the closest on-track battle in the top-right area. Shows "Battle for P[X]" with both drivers, the gap in seconds, and a progress bar visualization using team colors. Slides in with a 700ms animation when a close battle is detected.


OBS Setup

Step-by-step: adding a browser source

  • Open OBS Studio
  • In your scene, click the + button under Sources
  • Select Browser
  • Name it something useful (e.g., "Racey Timing Tower")
  • Set the URL to the overlay URL from your broadcaster dashboard
  • Set Width to 1920 and Height to 1080
  • Check Shutdown source when not visible to save resources
  • Click OK

The overlay renders on a transparent background, so it layers cleanly over your race footage.

Getting the overlay URL

  • Go to your Broadcast Dashboard in Racey
  • Select the league you're broadcasting for
  • Choose the overlay type you want
  • Copy the URL

The URL format is:

https://your-racey-url/broadcast/overlay/timing-tower?leagueId=<id>

For other overlay types, replace timing-tower with:

  • standings
  • driver-card
  • incident-ticker
  • fastest-lap
  • battle-tracker

Token-protected overlays

If the league admin has set up overlay protection (for private leagues), you'll need to include a token in the URL:

https://your-racey-url/broadcast/overlay/timing-tower?leagueId=<id>&token=<signed-token>

The league admin generates this token and shares it with you. It's an HMAC-SHA256 signature tied to the league — it won't work with other leagues. Without the token, a protected overlay returns a 403 error.

If no overlay secret is configured on the league, the overlays are public and no token is needed.

Round-specific overlays

To show data for a specific round (instead of the latest), add the roundId parameter:

https://your-racey-url/broadcast/overlay/timing-tower?leagueId=<id>&roundId=<roundId>


Real-Time Features

How live updates work

Racey overlays use Server-Sent Events (SSE) for real-time updates. Here's how the data flows:

flowchart LR

A[Race Data] --> B[Racey Server]

B --> C[SSE Stream]

C --> D[OBS Browser Source]

D --> E[Your Stream]

B --> F[Redis Pub/Sub]

F --> C

The overlay page polls the broadcast state every 15 seconds by default, but instantly refreshes when an SSE event arrives (results published, incident posted, timing update).

Auto-reconnect

If the connection drops (network hiccup, server restart), the overlay automatically reconnects using exponential backoff:

  • First retry: 1 second
  • Second retry: 2 seconds
  • Third retry: 4 seconds
  • Maximum wait: 30 seconds

Once reconnected, the overlay fetches fresh data immediately. You don't need to do anything — it recovers on its own.

Heartbeat

The server sends a heartbeat every 30 seconds to keep the connection alive. This prevents browsers and proxies from closing idle connections. If the overlay stops receiving heartbeats, it triggers the auto-reconnect flow.

Publishing broadcast updates

With broadcast.access permission, you can publish live announcements to overlays:

  • POST a broadcast update with a title, message, and severity (investigation, penalty, warning, note)
  • The update appears in the Incident Ticker overlay for all viewers
  • Penalty and warning announcements are auto-pinned
  • Updates are also sent to Discord if the league has the integration configured


Overlay Customization

Branding and colors

The league's primary and secondary colors (configured in league settings) are used throughout the overlays:

  • Primary color — default #dc2626 (red)
  • Secondary color — default #0f172a (dark slate)
  • Team colors — generated from team names using a deterministic hash

The league admin configures these colors in League Settings. You'll see them reflected in the timing tower's team stripes, the standings bar chart, and the battle tracker's gap bar.

Watermark

Leagues on the Free plan (or expired trials) display a "Powered by Racey" watermark in the bottom-right corner of all overlays at 50% opacity. Pro and Enterprise leagues have no watermark.

Which overlays work best for which race type

Race typeRecommended overlays
Sprint raceTiming Tower + Fastest Lap + Battle Tracker
EnduranceTiming Tower + Driver Card + Incident Ticker
Multi-classTiming Tower (shows class) + Standings (per-class)
Championship finaleTiming Tower + Standings + Battle Tracker
OvalTiming Tower + Fastest Lap + Incident Ticker

Troubleshooting

Overlay not loading

  • Check the URL — make sure the leagueId is correct and the overlay type is spelled right
  • Check the token — if the league uses overlay protection, verify the token is included and valid
  • Check the plan — overlays require Pro or Enterprise. Free-tier leagues get a 403 response
  • Check OBS settings — width should be 1920, height 1080. Make sure "Shutdown source when not visible" isn't hiding it

Data not updating

  • SSE connection — the overlay should show live data. If it's stale, the SSE connection may have dropped. Try refreshing the browser source in OBS (right-click > Refresh)
  • Results not published — overlay data comes from published results. If the race director hasn't published yet, the data won't appear
  • Server down — check if the Racey app is running

Wrong data showing

  • Wrong round — if you're using a roundId parameter, make sure it points to the current round
  • Cache — try right-clicking the browser source in OBS and selecting Refresh
  • Wrong league — double-check the leagueId in the URL

OBS performance tips

  • Use Browser Source (not Window Capture) for best performance
  • Set FPS to match your stream (30 or 60)
  • Enable Hardware acceleration in OBS browser source settings
  • Only keep visible overlays active — use the eye icon in OBS to hide unused ones
  • If overlays feel sluggish, check your system resources — browser sources use GPU for rendering


Related Guides

Back to Racey School
Start here first