Live streaming a tournament or competitive event without a visible score overlay is like broadcasting a football match without the scoreline on screen — viewers have no context. Whether you are streaming a martial arts competition on YouTube, a badminton tournament on Facebook Live, an esports event on Twitch or a debate championship on a private platform, a scoreboard overlay tells your audience what is happening at a glance.
This guide walks through exactly how to add a live scoreboard overlay to OBS Studio using a browser source. The process takes about five minutes and requires no coding, plugins or special software beyond OBS itself.
Why Streamers Need a Score Overlay
Viewers who tune into a live stream mid-match need to know the score immediately. Without an overlay, they have to wait for commentary to mention it, or ask in chat — both of which create a poor viewing experience. A persistent score overlay solves this by keeping essential match information visible at all times.
Beyond the basics, a good overlay also communicates:
- Participant names — who is competing in the current match.
- Round or period — where the match sits in its structure.
- Match context — whether this is a quarter-final, semi-final, final or group match.
- Real-time updates — scores changing live as the action happens, with no manual text editing required.
Professional broadcasts have had score tickers for decades. Browser-based overlays now bring the same capability to anyone with OBS Studio and a web connection.
How OBS Browser Sources Work
OBS Studio supports a source type called a Browser source. This embeds a live web page directly into your scene — it renders HTML, CSS and JavaScript just like a browser tab, but as a layer on top of your video. Crucially, if the web page has a transparent background, only the visible elements appear on your stream. The rest is see-through, letting your camera feed or game capture show beneath.
This is the mechanism that makes web-based scoreboard overlays possible. Your scoreboard tool provides a URL with a transparent background. OBS loads that URL as a browser source. The score appears on screen. When someone updates the score from a phone or laptop, the browser source refreshes automatically — your viewers see the change in real time.
Step-by-Step: Adding a Scoreboard Overlay to OBS
Step 1: Get Your Overlay URL
Your scoreboard tool needs to provide a dedicated overlay URL with a transparent background. In ScoreBracket, this is available on the Pro plan — each court has its own overlay URL that you can copy from the operator console. The overlay shows participant names, scores, round information and match context on a transparent background designed specifically for streaming.
Step 2: Add a Browser Source in OBS
Open OBS Studio and navigate to the scene where you want the overlay to appear. In the Sources panel at the bottom, click the + (plus) button. Select Browser from the list. Give the source a descriptive name — something like "Scoreboard Overlay" — and click OK.
Step 3: Configure the Browser Source
In the properties window that opens, paste your overlay URL into the URL field. Then set the resolution:
- Width: 800 pixels is a good starting point for a lower-third scoreboard. For a full-width ticker, try 1920.
- Height: 100 to 150 pixels for a compact score strip. Increase if your overlay includes additional match information.
Leave the other settings at their defaults unless you have a specific reason to change them. Click OK to confirm.
Step 4: Position and Resize the Overlay
Back in the main OBS canvas, you will see your scoreboard overlay as a draggable element. Position it where you want it to appear on stream:
- Top centre — the most common position for score overlays, visible without obscuring the main action.
- Bottom left or right — works well as a lower-third style overlay alongside a camera feed.
- Top corner — a compact option that stays out of the way for wide-angle event coverage.
Use the red bounding box handles to resize the source if needed. Hold Alt while dragging an edge to crop rather than scale — useful if you want to trim excess transparent space around the overlay.
Step 5: Go Live
Start your stream as normal. The scoreboard overlay is now part of your scene and will update in real time whenever scores change. An operator can update scores from a phone on the other side of the venue — the stream overlay reflects the change within a second.
Resolution and Performance Tips
Browser sources in OBS consume resources like any other source. A few practical guidelines to keep your stream running smoothly:
- Match the overlay resolution to what you need. An 1920x1080 browser source for a small score strip wastes resources. Size the source to its actual content area — 800x120 for a compact overlay, 1920x150 for a full-width ticker.
- Use the FPS setting wisely. Scoreboards do not need 60 frames per second. Setting the browser source to 30 FPS (or even lower) reduces CPU load with no visible impact, since score changes are infrequent.
- Avoid stacking multiple browser sources unnecessarily. If you need a score overlay and a match ticker, check whether your scoreboard tool provides a combined overlay before adding separate sources.
- Refresh the source if it stalls. Right-click the browser source and select "Refresh cache of current page" if the overlay stops updating. This forces OBS to reload the URL.
Transparency and Visual Quality
For the overlay to look professional, the background must be genuinely transparent — not just a solid colour that you chroma key out. Browser sources in OBS natively support CSS transparency, so a properly built overlay will composit cleanly over any background without green-screen artefacts or edge fringing.
ScoreBracket's streaming overlays are built with transparent backgrounds specifically for this purpose. The score elements float directly over your video feed with clean edges, consistent font rendering and no background bleed. You can toggle visibility of individual elements (timer, round label, match context) from the operator console without touching OBS.
Beyond the Basics: Multiple Courts and Match Tickers
If you are streaming an event with multiple courts or rings running simultaneously, you may want separate overlay sources for each — one showing the active court's score, another showing a scrolling match ticker with results from other courts. Each can be a separate browser source in OBS, positioned on different parts of the canvas.
For multi-camera setups, you can also create different OBS scenes for each court, each with its own scoreboard overlay source pointing to the corresponding court URL. Switching scenes in OBS automatically switches the overlay to the correct court.
Get Started with OBS Overlays
ScoreBracket's transparent streaming overlays are available on the Pro plan. Each court gets its own overlay URL with real-time score synchronisation, participant names, round labels and match context — all designed for clean compositing over any video source in OBS Studio. Check the features page for the full list of streaming capabilities.
If you are already using OBS for your event streams, adding a live scoreboard overlay is one of the highest-impact improvements you can make to your production quality — and it takes less than five minutes to set up.