How to Add a Scoreboard Overlay to Your OBS Stream with CloudMonet

CloudMonet ships with a gallery of production-ready broadcast graphics, including several scoreboard variants: a Football Scorebug, a Penalty Shootout Scoreboard, a Field Hockey Scoreboard, a World Cup Scorebug, and more, with new ones added regularly.

Head to the template gallery and pick the one closest to your sport. Each template page shows a live preview and a rundown of exactly what's operator-controllable — for example, the Football Scorebug template exposes team colors, team labels, badges, scores, possession indicators, timeouts, quarter, game clock, and an ad-hoc down & distance pill, all without opening the design canvas.

If nothing quite matches your sport, you can always start from a blank canvas and build your own — but for most common sports, a template gets you on air faster.

Every template has a companion control app — a lightweight, mobile-friendly page (at /control/<designId>) separate from the on-screen graphic itself, with a live preview of the graphic alongside the operator panel. This is what you (or whoever is scorekeeping) actually interact with during the game: tapping to increment a score, starting/pausing the clock, toggling possession, or cueing a state like a team alert banner.

Where you land when you click a template depends on whether you're logged in:

• Not logged in? Clicking a template takes you straight to its control app — a live demo you can click around in right away, no account needed.
• Logged in? Clicking a template takes you to the design editor instead, since you're set up to customize and own a project. From there, click the Control Panel button in the top-right corner to jump to that project's control app.

Either way, once you're in the control app, take a few minutes to preview and operate the graphic before your broadcast — trigger the score bump, run the clock, toggle possession, slide the alert banner in and out. It's a low-stakes way to get genuinely familiar with a template's controls so nothing feels unfamiliar once the game is live.

The control app also has a Take On Air / Take Off Air button — the graphic won't appear in your output until you click Take On Air, even after it's set up in OBS.

From the control app, fill in the specifics for your matchup:

• Team names/abbreviations and logos
• Team colors (these usually double as the plate/background color on the graphic)
• Starting clock length and period format
• Any sport-specific fields — down & distance, timeouts, possession, sets, etc., depending on the template

Because the fields are constrained to what the template's designer exposed (a select dropdown for quarter, a locked clock duration, a single team-label field), there's very little room to fat-finger something mid-broadcast.

Select the Output button at the top right of the control app — every published template gives you two URLs:

1. Output URL — this is the actual on-screen graphic, rendered as a transparent-background HTML5 page. This is the one that goes into OBS.
2. Control Panel Dock URL — this is just the operator panel from the control app, without the graphic preview. Keep this one open on your own laptop, tablet, or phone, or dock it inside OBS (Step 5); it's not meant to be seen by your viewers.

In OBS:

• Go to the Sources panel and click the + button, then choose Browser
• Accept the defaults in the dialog that appears
• Paste the output URL into the URL field, and set the width/height to match the template's canvas (1920×1080 for most templates)
• Click OK — your scoreboard should now appear as a source you can resize and position like any other layer

That covers what your viewers see. You can stop there and just keep the Control Panel Dock URL open in a separate browser tab or on a second device — but OBS also lets you dock that same operator panel directly inside the OBS window itself, so your operator never has to alt-tab away from OBS to update the score:

• In OBS, go to Docks → Custom Browser Docks (Docks menu on Windows/Linux; under View → Docks on some builds)
• Give the dock a name (e.g. “Scoreboard Control”) and paste in the Control Panel Dock URL
• Click Apply, then Close
• The operator panel now shows up as a dockable panel — drag it to wherever's convenient (a side panel, a second monitor, etc.) and it'll persist there across sessions

This is the setup most operators land on for live shows: the output URL as a Browser Source feeding the program, and the Control Panel Dock URL as a docked panel right next to the OBS preview — score, clock, and every other control live inside the same window as the stream itself.

Once the output URL is live in OBS and the control app is open wherever your scorekeeper is sitting, you're ready to go. A few things worth checking before you go live:

• Click Take On Air in the CloudMonet Control Panel — the graphic stays hidden until you do, even though the source is already added and enabled in OBS
• Make sure the source's visibility (the eye icon next to it in the Sources panel) is switched on — it's easy to toggle a source off while setting up a scene and forget to turn it back on
• In the Browser Source properties, make sure “Shutdown source when not visible” is unchecked, so the overlay doesn't have to reconnect every time you switch scenes
• Right-click the source and choose “Refresh” if it doesn't load on the first try

The published output URL doesn't change when you tweak the design or data binding later — so once it's in OBS, you never have to touch that source again, even between games.