webtrajanssport
en

OBS Scoreboard Overlay

Add a score bug with a transparent background to your grassroots, five-a-side or esports stream and update the score and clock live from this page.

Preview
0
0
00:00
Overlay URL (OBS Browser Source)
Open overlay

This control page and the overlay must run in the same browser. Easiest in OBS: add this page as a panel via Docks › Custom Browser Docks and add the overlay URL as a Browser Source.

This tool runs entirely in your browser; your data is never sent to a server.

How to use

  1. 1Enter team names, colours and the period label; choose position and size.
  2. 2Copy the overlay URL and add it in OBS via Sources › + › Browser; set width 1920 and height 1080.
  3. 3Add this page to OBS as a panel via Docks › Custom Browser Docks.
  4. 4During the stream, change the score and start or pause the clock from the panel; the overlay updates instantly.

How the control panel talks to the overlay

There is no server. The control panel writes every change to the browser’s local storage and a BroadcastChannel, and an overlay open in the same browser picks it up immediately. OBS browser sources and custom browser docks share the same storage, so the most reliable setup is to open this page inside OBS as a dock. A tab in Chrome cannot talk to an OBS browser source; in that case the overlay shows the settings baked into its URL and you need to copy the new URL after each change.

Clock and period

The clock counts up or down. For the second half start at 45 minutes and count up; for basketball quarters or futsal halves count down from 10 or 20 minutes. The time is calculated from the moment it was started, so the overlay and panel always show the same second. Type any period label such as “1ST HALF”, “EXTRA TIME” or “SET 3”, or hide the clock to show only the score.

Transparent background and placement

In overlay mode the rest of the page is hidden and the background is transparent, so only the score bug is visible. If you add the browser source full-screen (1920×1080) the position setting (top left, top centre, bottom centre) works directly, and you can switch between small, medium and large. The same URL also works as a browser source in Streamlabs and other streaming software.

Frequently asked questions

How do I add a scoreboard to OBS?

Copy the overlay URL, in OBS click + under Sources › Browser, paste it into the URL field and set the size to 1920×1080. The background is transparent.

How do I change the score while streaming?

Add this page in OBS via Docks › Custom Browser Docks and use the + and − buttons. Because the overlay runs inside the same OBS, it updates instantly.

Why does the overlay not update?

The control page and the overlay are open in different browsers (for example the panel in Chrome and the overlay in OBS). Open the panel inside OBS, or paste the new overlay URL into the browser source after each change.

Is it free, do I need an account?

It is completely free and needs no account or server; all settings stay in your browser.

Need a website for your club?

Fast, SEO-friendly websites and Google Ads management for sports clubs, academies and gyms — talk to Webin Agency.

Get free advice

Related tools