Guide

Getting Started

1. Create Your Account

Screenshot: Sign up page

2. Create Your First Scoreboard

Once logged in, click "Create New Scoreboard" to set up your first overlay. You'll be able to customize team names, colors, and other settings.

Screenshot: Create scoreboard interface

3. Get Your Overlay URL

Each scoreboard has a unique URL. Copy this URL to use in your streaming software. The overlay updates in real-time as you change scores.

Screenshot: Scoreboard URL and settings

How It Works

Scoreboardtools creates a live web page that displays your scoreboard. When you add this URL as a browser source in OBS (or other streaming software), it displays as an overlay on your stream. Any changes you make to the scoreboard are instantly reflected in the overlay.

Real-Time Updates

The overlay uses WebSocket technology to push updates instantly. When you change a score, it appears on your stream within milliseconds—no refresh needed.

Using with OBS Studio

Step 1: Add Browser Source

In OBS, right-click in the Sources panel and select "Add" → "Browser Source". Give it a name like "Scoreboard".

Screenshot: OBS add browser source menu

Step 2: Configure Browser Source

In the Browser Source properties:

Paste your scoreboard URL in the "URL" field
Set Width: 1920 (or your stream resolution width)
Set Height: 1080 (or your stream resolution height)
Check "Shutdown source when not visible" for better performance
Uncheck "Refresh browser when scene becomes active" (not needed)

Screenshot: OBS browser source settings

Step 3: Position and Resize

Click "OK" and the scoreboard will appear in your preview. You can drag it to position it and use the red handles to resize it to fit your stream layout.

Screenshot: Scoreboard positioned in OBS preview

Other Streaming Platforms

Streamlabs OBS

Same process as OBS Studio. Add a Browser Source and paste your scoreboard URL. Streamlabs uses the same browser source technology.

vMix

In vMix, add a "Web Browser" input. Paste your scoreboard URL in the URL field and configure the size to match your output resolution.

Wirecast

Add a "Web Page" source. Enter your scoreboard URL and set the dimensions. Wirecast will render the overlay in real-time.

Tips & Best Practices

Browser Source Dimensions

Always set the browser source dimensions to match your stream output resolution (e.g., 1920x1080). This ensures the overlay scales correctly and looks crisp.

Multiple Scoreboards

You can use multiple scoreboard overlays in the same stream. Create separate browser sources for each one. This is useful for showing different game modes or tournament brackets.

Performance Optimization

Enable "Shutdown source when not visible" in OBS to save resources. The overlay will automatically reconnect when the scene becomes active again.

Custom Styling

Use the customization options in your scoreboard settings to match your brand. You can adjust colors, fonts, and add logos. Changes are reflected instantly in your stream.

Mobile Updates

You can update scores from any device—your phone, tablet, or computer. Just log in to the web app and make changes. They'll appear on your stream immediately.

Troubleshooting

Overlay Not Showing

Verify the URL is correct and copied completely
Check that the browser source dimensions are set correctly
Try refreshing the browser source (right-click → Refresh)
Ensure you're logged in to the scoreboard in your web browser

Updates Not Appearing

Check your internet connection
Verify WebSocket connections are allowed (most firewalls allow this by default)
Try refreshing the browser source in OBS
Make sure you're editing the correct scoreboard

Performance Issues

Enable "Shutdown source when not visible" in browser source settings
Reduce the number of browser sources if using multiple overlays
Close unnecessary browser tabs on your streaming computer
Check your CPU usage in OBS

Need More Help?

If you're still having issues or have questions, reach out to us at contact@locals.gg

Table of Contents