OBS Studio setup

Add the overlay

1. In the Sources panel, click + and choose Browser.
2. Name it something clear like "HockeyScore Scoreboard" and click OK.
3. Paste your overlay URL into the URL field.
4. Set Width and Height to match your OBS canvas:
   • 1080p: 1920 x 1080
   • 720p: 1280 x 720
5. Click OK.

Position and layer it

1. Right-click the overlay source → Transform → Fit to screen. This locks it to the exact canvas size so nothing drifts.
2. Drag the overlay source above your camera/video source in the Sources list. Overlay must be on top to be visible.
3. Right-click the overlay source and click Lock to prevent accidental movement during the game.

Match your canvas and output

For the sharpest overlay, make sure your canvas and output resolution are the same:

1. Go to Settings → Video.
2. Set Base (Canvas) Resolution to 1920x1080 or 1280x720.
3. Set Output (Scaled) Resolution to the same value.

If the overlay stops updating mid-game, right-click the Browser Source and choose Refresh — this is faster than restarting OBS.

Quick reference