ScoreBugs- Broadcast Set Up

Once you have set up a scorebug for your event (see Scorebugs — Getting Started), the display page shows the scorebug on a solid-color background. Your streaming software captures that page as a browser source and removes the background color with a chroma key filter, leaving just the scorebug floating over your video.

The display page and its settings

Click Settings in the top-right corner of the display page to open the display options:

The Settings panel: change the key color, or jump back to reconfigure without starting over.

• Background Color — the chroma key color. Presets for Green (default), Blue, Magenta, and White, or enter any custom hex color.

• Edit Colors & Logos — returns to the configuration page with your current setup intact.

• Change Scorebug Style — returns to the style picker.

Choosing a key color: Pick a background color that does not appear in either team's logo or colors. If a team wears green, switch to magenta or blue before keying — otherwise parts of the scorebug will disappear along with the background.

OBS Studio

1. Copy the full URL of the scorebug display page from your browser's address bar. (The URL contains your colors and team setup — bookmark it to reuse the same look later.)

2. In OBS, click + under Sources and choose Browser.

3. Paste the URL, and set Width to 1920 and Height to 1080 (or your canvas size).

4. Right-click the browser source → Filters → click + under Effect Filters → Chroma Key.

5. Set Key Color Type to match the display background (Green by default). The background disappears, leaving the scorebug.

6. Position and scale the scorebug wherever you want it on screen. Use Alt-drag (or a Crop/Pad filter) to crop the source down to just the scorebug area — this also crops out the on-page Settings button.

vMix

1. Click Add Input → Web Browser and enter the display page URL at your output resolution.

2. On the input, open Colour Key (Settings → Colour Key) and select the background color (green #00FF00 by default).

3. Use Position to crop, scale, and place the scorebug, then overlay the input on your program.

Other tools (Wirecast, Streamlabs, ATEM software, hardware keyers pointed at a browser output) work the same way: browser/web source → chroma key the background color → crop and position.

What the scorebug does during the game

• Updates itself. The scorebug polls the live stats feed every few seconds. Score changes, base runners, down & distance, cards, and set scores appear automatically — never refresh or touch the page mid-broadcast.

• Rotating bottom bar. On styles that include it, the bottom bar cycles through team stat comparisons every 10 seconds.

• Period, not clock. Scorebugs show the period/quarter/half indicator instead of a running game clock, because the clock in the stats feed lags real time.

• Before the game, the scorebug shows zeros; when the game goes final, it shows the final state.

Here is how the finished overlay looks after keying — a football and a volleyball example:

Troubleshooting