Add a live scoreboard to OBS Studio
OBS Studio reads a web page as a video layer through its Browser source. The Score All overlay is a web page with a transparent background, so it drops straight onto your camera with no green screen and no plugin.
A demo URL you can paste in right now
This URL renders a working scoreboard with sample players. Use it to get the source sized and positioned, then swap in your real match URL when you start scoring.
Swap table-tennis for any sport slug, for example https://score-all.com/scoreboard-overlay/demo/basketball.
OBS Studio, step by step
- Start the match in Score All. On the launch screen, copy the overlay URL (it is also in the console, under Overlay).
- In OBS, click the + under Sources and choose Browser.
- Name it "Scoreboard" and click OK.
- Paste the overlay URL into URL.
- Set Width to 1920 and Height to 1080.
- Untick "Shutdown source when not visible" so the scoreboard keeps updating while you are on another scene.
- Untick "Refresh browser when scene becomes active" so switching scenes does not blank the score for a second.
- Click OK. Drag the layer above your camera in the Sources list.
What to put in the width and height boxes
| Size | When to use it |
|---|---|
| 1920 x 1080 | Full canvas. Use this unless you have a reason not to: widget positions in the designer are pixel-for-pixel what the stream shows. |
| 1280 x 720 | 720p streams. The whole stage scales down, so nothing moves relative to the picture. |
| 820 x 140 | Score bug only. Crop the browser source to the top-left bug if you want the score and nothing else. |
| 820 x 220 | Score bug with the row under it (games won, serve dots, clock or outs, depending on the sport). |
| 1080 x 1920 | Vertical streams for phone-first platforms. Scale the bug up in the designer first. |
The settings people get wrong
Leave Custom CSS alone
OBS pre-fills the Custom CSS box with a rule that makes the page background transparent. The overlay is already transparent, and the default rule does no harm. Do not delete the box contents and add your own unless you know what you are changing.
Set it up before the match starts
The overlay shows the names and a 0-0 score as soon as the match is created, so you can position it in OBS ahead of time. Score one point and undo it to confirm it is updating.
Nothing to install
There is no plugin, no local server and no file to download. If the page loads in your browser, OBS can read it.
OBS Studio scoreboard FAQ
Is the OBS Studio scoreboard overlay free?
Yes. Every Score All match has an overlay URL on every plan, including free. Paid plans add the designer and remove the small watermark.
What size should the browser source be?
Set it to 1920 x 1080. The overlay stage is a fixed 1920 x 1080 canvas, so what you position in the designer is what lands on the stream. A 720p stream can use 1280 x 720 and everything scales down together.
Does the score update by itself?
Yes. Whoever is scoring the match taps their phone and the overlay redraws within about a second. Nobody touches OBS Studio during the game.
Can I use it without an account?
Watching needs no account. Creating the match that the overlay follows needs a free account, which is also what stops strangers from editing your score.
Other streaming tools, and your sport
Streamlabs Desktop
Same Browser source, slightly different menus.
YoloBox and YoloLiv
Hardware switchers that take a web overlay.
vMix
Windows production software, Web Browser input.