Add HockeyScore overlay to any streaming software • HockeyScore

Adding your overlay (any software)

The universal setup

These steps work regardless of which streaming software you use. For app-specific guides, see the OBS, Streamlabs, and PRISM pages.

1. Copy your overlay URL

In HockeyScore, open your scoreboard and copy the Overlay URL. This is the link you'll paste into your streaming software.

Make sure you're copying the overlay URL — not the control panel URL or your dashboard link. The overlay URL loads a transparent page showing only the scoreboard graphic.

2. Add a browser source

In your streaming software, add a new Browser Source (sometimes called "Web Overlay" or "Web Page"). Paste your overlay URL into the URL field.

3. Set the size to match your canvas

Set the browser source dimensions to match your stream canvas:

1080p stream → Width: 1920, Height: 1080
720p stream → Width: 1280, Height: 720

A size mismatch is the most common reason overlays look cropped, zoomed, or blurry.

4. Layer it above your video

Your overlay must sit above the camera/video source in the source list. If the overlay is behind the video, it won't be visible. Think of sources as layers — items higher in the list appear on top.

5. Verify before going live

Overlay is visible in your stream preview
Text is readable on a phone screen (score, period, clock)
Transparency works — you see video through the overlay, not a solid background
Updates work — Tap a test goal in the control panel and confirm the overlay changes

Quick troubleshooting

Overlay not showing?
Check that the browser source is above your video in the source list. Also verify the overlay URL loads correctly in a regular browser tab.

Overlay looks cropped or zoomed?
The browser source dimensions don't match your canvas. Set both to the same resolution (1920x1080 or 1280x720).

Solid background instead of transparency?
Make sure you're using the overlay URL, not the control panel or dashboard URL. The overlay URL renders with a transparent background by default.

Overlay not updating?
Refresh the browser source in your streaming software. If that doesn't help, check your internet connection — the overlay needs a stable connection to receive updates.

Overlay looks blurry?
Don't scale the overlay by dragging corners. Set the exact dimensions in the browser source properties and use "Fit to screen" if your software offers it.