OBS Scoreboard Overlay — Put a Live Hockey Score on Your Stream (Free)

Streaming a game is easy. Streaming a game where viewers can tell who is winning is the part most amateur broadcasts get wrong. Ten minutes into a youth hockey stream, the grandparents watching still have no idea what the score is, which period it is, or why one team suddenly has an extra skater.

This page shows you how to fix that in about two minutes, for free, with a browser source.

What you get

A transparent scorebug that sits on top of your camera feed and updates live:

• Team names, abbreviations and colors
• Score and period — three periods plus overtime
• Game clock, turning red under the final minute
• Penalty timers with jersey numbers, counting down on their own
• Power play indicator on whichever side has the extra skater

The scorer works from a phone at the bench. The stream machine never has to be touched.

Before you start

You need two things:

1. OBS Studio (or Streamlabs, vMix, Wirecast, Ecamm, Prism — anything with a browser source). OBS is free.
2. A game code, which takes one click to get.

Step 1 — Start a game and copy the URL

Open the hockey scoreboard and click Share, then Start Hosting.

You will get a six character game code and, below it, an OBS Browser Source box. Click the copy button next to it. The URL looks like this:

https://www.hockeyscoreboardonline.com/overlay?join=4HBUR8&transparent=true

Keep that tab open — that is the tab you score from.

Step 2 — Add it to OBS

1. In the Sources panel, click +
2. Choose Browser
3. Give it a name, e.g. Scoreboard, and click OK
4. Paste the URL into the URL field
5. Set Width to 400 and Height to 150
6. Tick Shutdown source when not visible
7. Click OK

Drag the scorebug wherever you want it. Corners work best — broadcasters usually pick the upper left.

Step 3 — Score from your phone

Open the same site on a phone, click Share, and enter the game code. Now the person at the bench controls the score and the stream machine shows it. Add a goal and watch the overlay change on the stream within a second.

That is the whole setup. Nothing to install, no plugin, no account.

The overlay is blank. Fix this first.

If the browser source shows nothing at all — not a blank scoreboard, but genuinely empty — the cause is almost always OBS browser hardware acceleration, especially on macOS. OBS logs no error for this. Everything looks correctly configured and the source is simply never drawn.

Settings → Advanced → untick "Browser Source Hardware Acceleration" → restart OBS.

This is an OBS rendering issue, not a problem with your setup or your network. It is worth checking before anything else, because nothing about the symptom points at it.

If the overlay is still empty afterwards, load the same URL with transparent=false in an ordinary browser tab. The page turns green and prints a diagnostic panel in the corner showing the game code and connection state:

• connected — the overlay is receiving data, so the problem is on the OBS side
• connecting or an error — the browser cannot reach the game
• A yellow warning about a missing ?join= code — the URL lost its parameters when you copied it

Other things people run into

The overlay shows an old game. Game codes change every time you start hosting. If you configured OBS last week, the URL points at a game that no longer exists. Copy the current one from the Share dialog.

The overlay froze mid-game. The scoring tab dropped its connection — a phone locking its screen or arena Wi-Fi cutting out will do it. Start hosting again and update the URL in OBS.

The scorebug is cut off. Set the browser source to 1920 × 1080 instead. The scorebug will anchor to the top left of that area and you can position it freely on the canvas.

Facebook rejects the stream or the picture stutters. That is an encoder setting, not the overlay. Facebook requires a keyframe interval of 2 seconds — Settings → Output → Output Mode: Advanced → Streaming.

URL parameters

Append these to the overlay URL to change its appearance:

Example — a larger board along the bottom with penalties hidden:

https://www.hockeyscoreboardonline.com/overlay?join=4HBUR8&theme=full&position=bottom&showPenalties=false

Does this work with software other than OBS?

Yes. The overlay is an ordinary web page with a transparent background, so anything that accepts a browser or web source will display it: Streamlabs Desktop, vMix, Wirecast, XSplit, Ecamm Live, Prism Live Studio, YoloBox.

Phone apps that stream straight to Facebook or YouTube — the official apps, not third party encoders — do not composite layers at all, so no overlay of any kind can be added there. If you stream from a phone, put a tablet showing the scoreboard in the camera's view instead, or send viewers the spectator link so they can follow the score alongside your stream.

Is it really free?

Yes. The scoreboard and the overlay are free, with no account required and no watermark on the overlay. Sign in only if you want to save game history.

Ready? Open the scoreboard →