How to add a scoreboard overlay to Wirecast

Wirecast is professional live video production software used by broadcasters, schools, and sports organizations for multi-camera streaming. Adding a scoreboard overlay (also called a score bug) enhances your broadcast with real-time game information. This guide demonstrates how to integrate a web-based scoreboard overlay into Wirecast productions.

Understanding Wirecast and Scoreboard Overlays

Wirecast functions as a software video switcher and streaming encoder that runs on both Windows and Mac computers. The software supports multiple input types including cameras, video files, images, and web page sources. Web page sources enable dynamic overlays that update in real-time without interrupting the broadcast. Visit the official Wirecast 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 two main steps:

1. Set up your scoreboard (create the scoreboard and get the overlay URL)
2. Add the URL as a web page source in Wirecast and position the overlay

This approach enables remote score management from any device while the broadcast continues uninterrupted.

Step 1: Set Up Your Scoreboard

In this step we create and customize a scoreboard.

We have dedicated scoreboards for the following sports: football, baseball, basketball, hockey, soccer, tennis, volleyball and more! To begin, click the button below 👇 and choose your sport.

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.

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 2: Adding the Overlay to Wirecast

Creating a Web Page Shot

Open Wirecast and locate the main production window. In the shot layers panel, you'll see your various input sources and layers.

Click the "+" button in an empty layer to add a new source. Select

• "Backgrounds" and then
• "Web Page"

Configuring the Web Page Source

In the Web Page settings dialog, paste your KeepTheScore overlay URL into the "Address" field.

Configure these essential settings:

• Address: Your KeepTheScore overlay URL
• Width: Match your canvas width (typically 1920)
• Height: Match your canvas height (typically 1080)
• Transparent Background: Check this box to enable transparency

Click OK to create the web page source.

Positioning the Overlay

The scoreboard now appears as a shot in your layer. Click on the shot to activate it in your preview or program output.

To position and resize the scoreboard:

1. Select the scoreboard shot in your layer
2. Use the canvas controls to drag and position the overlay
3. Drag the corner handles to resize if needed
4. Ensure the web page layer is above your video camera layers

Your scoreboard overlay now appears correctly 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 control panel URL

Score updates reflect immediately in the Wirecast 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 Wirecast provides several benefits:

Cross-Platform Compatibility: Works on both Windows and Mac versions of Wirecast.

No Additional Software: Web page 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.

Multi-Device 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
• Restart Wirecast if the web page source fails to load
• Ensure Wirecast has permission to access the internet through your firewall

Transparency Issues

• Confirm "Transparent Background" is checked in the web page source settings
• Make sure the overlay URL is the correct streaming/overlay URL (not the regular display URL)
• Update Wirecast to the latest version if transparency appears as black or white

Scoreboard Not Updating

• Verify internet connection is stable
• Right-click the web page source and select "Reload Page" to refresh
• Check that you're updating the correct scoreboard in your control panel
• Clear browser cache in Wirecast settings if updates are delayed

Performance Optimization

• Use wired ethernet instead of WiFi for the production computer
• Close unnecessary applications to free up system resources
• Consider reducing web page source resolution if experiencing lag
• Ensure your computer meets Wirecast's recommended system requirements

Advanced Tips

Save Shots as Presets: Once you've configured your scoreboard overlay, save it as a preset for quick reuse in future broadcasts.

Multiple Scoreboard Layouts: Create different web page sources for different layouts (full scoreboard, compact bug, minimal overlay) and switch between them during your broadcast.

Layer Organization: Keep your scoreboard layer consistently at the top of your shot layers for easy access and to ensure it always appears above video sources.

Test Before Going Live: Always test your scoreboard overlay in a private stream or recording before broadcasting live to ensure everything works correctly.

Web-based scoreboards integrate seamlessly with Wirecast, providing professional sports graphics without complex setup or specialized training.