How to Add a Live Scoreboard to OBS Using a Browser Source

If you have ever watched a fighting game tournament, a charity stream, or a community game night and wondered how the host keeps a live scoreboard on screen, the answer is almost always a browser source. OBS Studio (and tools like Streamlabs, XSplit, and vMix) can embed any web page directly into your scene. Point it at a live scoreboard URL, and your viewers see scores update in real time without you ever touching OBS mid-stream.

This guide walks through the whole workflow: creating a scoreboard, grabbing the right link, adding it to OBS as a browser source, and updating the score live from your phone or a second device while you broadcast. If you want the short version with recommended settings, the OBS scoreboard overlay page has it.

What is a browser source scoreboard?

A browser source is an OBS feature that renders a web page inside your scene, just like a webcam feed or a game capture. Any URL works, but the magic happens when the page updates itself without a refresh. That is exactly what MakeTheBoard does. Every scoreboard has a public link that streams changes over a WebSocket connection. When you tap a score on your phone, viewers watching through OBS see it move instantly.

Streamers use this for:

• Head-to-head match scores during fighting game, Smash, Rocket League, or FIFA events
• Best-of series where the bug shows games won as well as the score in the current game
• Sports streams for a school, club, or league, with the game clock and period on the bug
• Community game nights for party games, trivia, or Mario Kart leagues

The advantage over a static image overlay is obvious: you do not have to edit a graphic and swap it out every time the score changes. The page handles everything.

---

Step 1: Create your scoreboard and copy a link

Before you open OBS, you need a board.

1. Go to MakeTheBoard and create a scoreboard. No account is needed to try it; sign up when you want to keep the link permanently.
2. Pick the sport. That decides what the bug shows: a game clock for basketball or soccer, sets for volleyball, the count for baseball, or a plain score with +1 buttons under Something else for esports. You can rename the period label to Game, Map, or Round afterwards in Settings.
3. Name the teams and set their colours. Pick colours that work against your stream layout.
4. Click Share link in the console. You get two links:
   • The public display link, which looks like https://maketheboard.com/s/friday-night-finals. It works on every plan and shows the full scorebug on a dark background.
   • The stream overlay link, which is the same URL ending in ?overlay=1. It draws only the scorebug, with a transparent background and no page chrome, so it keys straight over your video. The overlay link is part of the one-time unlock for a scoreboard, which also removes the MakeTheBoard mark and turns on team logos.

Copy whichever one you are using. You will paste it into OBS in the next step.

---

Step 2: Add it to OBS as a browser source

Open OBS Studio and go to the scene where you want the scoreboard to appear.

1. In the Sources panel, click the + button and select Browser.
2. Give it a name like "Scoreboard" and click OK.
3. In the properties window, paste your MakeTheBoard link into the URL field.
4. Set the Width and Height. The scorebug is a wide strip, so give the source the full width of your canvas and crop the height afterwards:

Canvas	Width	Height	Notes
1080p	1920	400	Crop the empty space below the bug with Alt-drag
720p	1280	270	Same idea at the smaller canvas
Side panel	640	360	The bug wraps to a narrower layout; check it before you go live

5. Leave FPS at 30. The scoreboard is not video, so a higher frame rate only spends CPU.
6. Check Refresh browser when scene becomes active if you switch between scenes. This reconnects the page if the network dropped during a break.
7. Uncheck Shutdown source when not visible. If it is on, OBS closes the page every time you switch scenes and the live connection has to be rebuilt when you come back.
8. Leave the Custom CSS field at OBS's default. That default rule is what makes a web page's background transparent, and the overlay relies on it.
9. Click OK.

You should now see the scorebug in your scene. Use the red bounding box handles to resize and position it, and hold Alt while dragging an edge to crop off anything you do not need.

Transparent overlay or full display?

The overlay link draws the bug and nothing else, so it floats over gameplay or a camera feed like a broadcast graphic. Use it when the score sits on top of your content.

The display link draws the same bug on a dark stage, with the MakeTheBoard mark. It is free, and it is the right choice for an intermission screen, a dedicated scoreboard scene, or a docked side panel where a solid background is fine. Crop it in OBS to show just the strip if you want it tighter.

---

Step 3: Update the score live from your phone

Here is where the workflow gets powerful. You do not need to alt-tab out of your game to update the score.

1. On your phone or tablet, open the scoreboard console, or open the scorekeeping link from the Share dialog. The scorekeeping link works without an account, so you can hand it to a co-host or a volunteer.
2. Tap the big +1, +2, or +3 buttons. The change pushes to the overlay instantly over a WebSocket connection.
3. Mis-tapped? Undo reverses the last change. Sound the horn at the end of a period, and flip the FINAL switch when the match is over.

Your OBS browser source picks up every change in real time. No refresh, no scene switch, no hotkey. Tap the score and keep playing.

This "remote scorekeeper" workflow is especially useful for:

• Solo streamers who are also the player. Keep your phone on your desk and tap between rounds.
• Tournament organizers who hand score duties to a volunteer. Send them the scorekeeping link and they update from their own device.
• Duo streams where one person plays and the other manages production. The producer runs the score from a laptop while the player focuses on the game. At a desk, the arrow keys score and the space bar starts and stops the clock.

---

Troubleshooting checklist

Browser sources are generally reliable, but a few things can go wrong. Here is a checklist for the most common issues.

The browser source is blank or shows a white rectangle

• Check the URL. Make sure you pasted the display or overlay link from Share, not the console URL you edit from.
• Check your internet connection. The browser source needs to reach maketheboard.com to load. If your streaming PC is on a restricted network (hotel Wi-Fi, corporate firewall), the connection might be blocked.
• Refresh the source. Right-click the browser source in OBS and select Refresh. If the page loaded before the WebSocket connected, a refresh usually fixes it.
• Restart OBS. Occasionally the Chromium Embedded Framework (CEF) that OBS uses for browser sources gets stuck. A full restart clears it.

The overlay shows a "Stream overlay locked" card

• The ?overlay=1 link only renders for a scoreboard that has been unlocked. Unlock it from the scoreboard console, under the preview, or point the source at the plain display link (the same URL without ?overlay=1) in the meantime.

The bug looks cut off or the wrong size

• Adjust Width and Height in source properties. The browser source renders at the pixel dimensions you specify. If the bug is cropped, increase the width.
• Use Transform > Fit to Screen. Right-click the source, go to Transform, and select Fit to Screen to scale it to your canvas without cropping.
• Crop instead of scale. Hold Alt and drag an edge of the source in the scene to crop out the empty space below the bug.

Scores are not updating in real time

• Check that "Shutdown source when not visible" is unchecked. If this is on, OBS kills the browser page when you switch scenes, and the WebSocket disconnects.
• Disable browser source caching. In the browser source properties, add ?nocache=1 to the end of the URL (or &nocache=1 after ?overlay=1). Some OBS versions aggressively cache the initial page load.
• Check the Custom CSS field. If someone has replaced OBS's default CSS, it may be overriding the bug's styles. Reset it to the default.

The bug loads but looks blurry

• Match the source dimensions to your canvas. If your canvas is 1920x1080 and you set the browser source to 800 wide then scale it up, it will look soft. Set the browser source to the actual pixel size you want it displayed at, or larger, and scale down.

---

Alternatives and limitations

MakeTheBoard is one way to get a scoreboard into OBS, but it is worth understanding the tradeoffs.

Custom HTML overlays: If you want to design every pixel of a bespoke graphic, a hand-built HTML/CSS widget or a StreamElements custom widget gives you total control, at the cost of building and maintaining it. MakeTheBoard gives you a finished scorebug with sport presets, a clock, undo, and a phone console, and the overlay link keys it over video. It does not let you restyle the bug beyond team colours and logos.

Static image vs. live URL: Some streamers create scoreboards as images in Photoshop or Canva and swap them manually. This works for events where scores rarely change, but it falls apart during fast-paced matches. A live URL source saves you from constantly alt-tabbing to update graphics.

Spreadsheet embeds: You could embed a Google Sheet, but it refreshes on a polling interval (not real time), looks like a spreadsheet (because it is one), and requires fiddling with embed parameters to size correctly. MakeTheBoard is purpose-built for display.

---

Get started

Setting up a live scoreboard in OBS takes about two minutes: create a scoreboard, copy the link, paste it into a browser source. From there, you can update the score from your phone while you play, and your viewers see every change the moment it happens.

Create your free scoreboard and drop it into your next stream.