vMix is professional live production software used by broadcasters, sports organizations, and content creators for multi-camera streaming and recording. Adding a scoreboard overlay (also called a score bug) enhances production value and provides viewers with real-time game information. This guide demonstrates how to integrate a web-based scoreboard overlay into vMix broadcasts.
Understanding vMix and Scoreboard Overlays
vMix functions as a software video mixer, switcher, and streaming encoder that runs on Windows computers. The software supports multiple input types including cameras, video files, images, and web browser sources. Web browser sources enable dynamic overlays that update in real-time without interrupting the broadcast. Visit the official vMix website for software specifications and licensing options.
Scoreboard overlays display game information as transparent graphics positioned over video content. Unlike static graphics, web-based scoreboards update instantly when scores change, eliminating the need to recreate graphics during live events.
Implementation Overview
The integration process consists of three main steps:
- Create a scoreboard on KeepTheScore with your chosen sport and design
- Generate the overlay URL configured for transparency
- Add the URL as a browser input in vMix and position the overlay
This approach enables remote score management from any device while the broadcast continues uninterrupted.
Step 1: Create a scoreboard
In this step we create and customize a scoreboard. To begin, click the button below 👇 and choose your sport.
We have dedicated scoreboards for the following sports: football, baseball, basketball, hockey, soccer, tennis, volleyball and more!
You should then see the following. This is your "control panel".
Control panel for an online scoreboard
You will use this control panel to control the scores. For detailed customization options (team names, colors, logos, layouts), see our scoreboard customization guide.
💡 You can share the URL of the control panel to give someone else the ability to change scores. Click the "Share scorekeeping link" button to copy the link or generate a QR code for easy sharing.
Step 2: Get hold of the scoreboard URL
Next, we will get hold of the public scoreboard URL.
Click on the "Open Display Scoreboard" button at the top of the control panel. See below:
1. Getting the scoreboard link
You have several options in the dialog that appears:
- Click "COPY" to copy the URL to your clipboard
- Click "VIEW" to preview the scoreboard
2. Getting the scoreboard link
💡 Layout Options: Many sports (including Universal, Basketball, Hockey, and all set-based sports like Tennis, Volleyball, Badminton, Squash, and Pickleball) support multiple layouts. You can:
- Use different layouts on different devices simultaneously
- Lock specific layouts using URL parameters (e.g.,
?layout=simpleBug)- Show a scorebug overlay in your stream while displaying a full scoreboard on a TV
Click "Click here" in the share dialog to see all available layout options for your sport.
Step 3: Adding the Overlay to vMix
Creating a Browser Input
Open vMix and locate the main production window. The input section displays all available sources for your production.
Click the "Add input" button to open the input selection dialog. Navigate to the "Web browser" tab and paste your scoreboard URL from Step 2. Click OK to create the browser input.
Activating the Overlay
The scoreboard now appears as Input 2 in your input list. Click the numbered button (it turns green when active) to overlay the scoreboard on your program output.
Positioning and Sizing
The overlay initially appears at full size. Click the settings icon (gear symbol) on the scoreboard input to access positioning controls.
In the settings dialog, select the "Position" tab. Adjust these parameters:
- Zoom: Use the slider to resize the scoreboard to appropriate dimensions
- Position: Click and drag the scoreboard preview to place it in your desired screen location
- Crop: Remove any unwanted edges if necessary
Close the dialog after positioning. Your scoreboard overlay now appears correctly sized and positioned in the program output.
Managing Scores During Broadcast
Once configured, the scoreboard updates automatically when changes are made on KeepTheScore. The score operator can work from:
- A separate computer on the same network
- A mobile device (phone or tablet)
- Any location with internet access using the admin URL
Score updates reflect immediately in the vMix output without requiring any action from the video operator. This separation of duties allows dedicated personnel to focus on their specific roles during production.
Technical Advantages
Using web-based scoreboards with vMix provides several benefits:
No Additional Software: Browser sources eliminate the need for specialized graphics software or plugins.
Remote Operation: Score operators work independently without accessing the production computer.
Multiple Layouts: Switch between full scoreboard and compact bug layouts using different URLs.
Automatic Updates: Changes appear instantly without manual graphic replacement.
Cross-Platform Control: Manage scores from Windows, Mac, iOS, or Android devices.
Troubleshooting Common Issues
Scoreboard Not Appearing
- Verify the URL is correctly copied including all parameters
- Check internet connectivity on the production computer
- Ensure vMix has permission to access web content in Windows firewall
Transparency Issues
- Confirm the overlay URL includes transparency parameters
- Check that hardware acceleration is enabled in vMix settings
- Update graphics drivers if transparency appears as black or white
Performance Optimization
- Use wired ethernet instead of WiFi for the production computer
- Close unnecessary browser tabs and applications
- Consider using vMix's browser source caching options for stability
Web-based scoreboards integrate seamlessly with vMix, providing professional sports graphics without complex setup or specialized training.
