Skip to content
Help

Add your scoreboard to OBS

Your stream can carry the same score the referee is entering on the court. The overlay is a web page, so OBS takes it as a browser source: paste one address, size it once, and it follows the match from then on. Nothing to export, nothing to retype between points.

This page is the OBS walkthrough. Scoreboard & broadcast covers the rest of the scoreboard, including the venue screen and the code you hand a referee. If you want to see the panel moving before you set anything up, there is a running demo of it on www.scored.gg/broadcast.

Before you start

Section titled “Before you start”
  • A plan with the scoreboard. The scoreboard and the overlay come with the Small plan and up. On Free, the scoreboard page tells you it is not part of the tournament’s plan - see Plans & billing.
  • At least one court. The overlay belongs to a court, not to the tournament, so a court has to exist before there is an address to copy. Schedule covers adding them.
  • OBS on the machine that streams. Any recent version. There is no plugin to install and nothing to sign into.

Get the overlay address

Section titled “Get the overlay address”

  1. Open your scoreboard site.

    It sits on the same subdomain as your public page:

    https://your-tournament.scored-board.com

    It opens on your courts, each card named for its court, with the match on it now.

    The scoreboard site’s courts list: Court 1 showing JAP 2, ARG 1 in the Open division, and Court 2 reading No active match

  2. Open the court you are streaming.

    The full-screen display for that court fills the browser.

    A court display with a match running: the set clock at 02, the match clock at 19, and JAP 2 against ARG 1

  3. Use the camera button in the top left corner.

    That switches to the overlay for the same court. The button is white on a white display, which is what makes it hard to find. Move the pointer over that corner and it shows.

    The camera button, shown in its hover state

  4. Copy the address from the browser bar.

    It is the court’s address with /tv on the end. The page it opens is a compact panel with both teams, the score, the clock or sets, the division, and penalties. A penalty shows against the team. It shows against the player who took it when that team has a lineup, and lineups come with the Medium plan and up.

    The overlay panel: ARG 1 against JAP 2, 1st half 19, set 02, labeled Open

Add it to OBS

Section titled “Add it to OBS”

  1. In Sources, click +, then Browser.

    Name it after the court, so the Sources list stays readable when you are streaming more than one.

    OBS’s Add Source dialog with Browser selected in the list on the left and Add a new Browser on the right

  2. Paste the address into URL.

    Leave the custom CSS box alone. The overlay brings its own styling.

    The browser source’s properties with a court’s overlay address in the URL field, Width 1920 and Height 1080. The address in the image is a pattern, so use your own court’s. The preview above it is still OBS’s own page for a new browser source.

  3. Set Width and Height to your canvas size.

    For most streams that is 1920 by 1080. The panel draws itself at its own size inside that space rather than stretching to fill it, so give it room and crop afterward instead of scaling the whole page.

    The scene output at 1920 by 1080 with the source at canvas size: the panel sits in the upper right at its own size, and the rest of the source is transparent

  4. Crop to the panel and place it.

    Hold Alt (Option on a Mac) and drag a handle to crop the empty area away, then drag the panel into your layout.

    The same scene output after the crop: the panel on its own, moved to the top center of the canvas

Set up, it looks like this in OBS.

OBS with a scene named Scored overlay selected, a browser source named Scored scoreboard in the Sources list, and the cropped panel in the preview. The source is selected, so OBS is showing its distance from each edge of the canvas.

The same properties scrolled down to the two checkboxes: Shutdown source when not visible is off, Refresh browser when scene becomes active is on. The preview shows the overlay panel with ARG 1 against JAP 2 in the Open division.

Put the teams on the right side

Section titled “Put the teams on the right side”

If your camera angle disagrees with the scoreboard, add ?mirror to the end of the overlay address in OBS to swap which team sits on which side. The address ends /tv?mirror instead of /tv.

The same properties with the URL field ending /tv?mirror. The preview has not reloaded yet, so the panel above still shows the teams in their original order.

That changes the overlay only. The venue screen and the referee’s view stay as they are.

Check it before you go live

Section titled “Check it before you go live”

Ask the referee to start the match, or start one yourself, and watch the panel in OBS. The teams, the score, and the clock or set tally update as the referee scores. When the panel moves with the court, the overlay is set up and you can leave it alone.

If the panel does not show

Section titled “If the panel does not show”
  • The source is empty. Almost always the address. Open it in a normal browser tab: if the page does not load there, it will not load in OBS either.
  • The overlay shows nothing or a placeholder. It is working and waiting. It fills in when the referee starts the match on that court.
  • It says the scoreboard is not part of the plan. The tournament is on Free. Plans & billing covers moving up.
  • The panel looks stretched or soft. The source is being scaled rather than cropped. Reset the transform, set Width and Height back to your canvas size, and crop with Alt or Option instead.
  • The score is not moving. Check the court. The overlay only shows what the referee is entering, so if nothing is being scored on the court’s control page, nothing changes on the stream. Running a match walks a referee through it.