Streaming competitive events requires real-time ranking displays to keep viewers engaged. This guide explains how to integrate a live leaderboard overlay into your OBS (Open Broadcaster Software) stream.
OBS has become the industry standard for live streaming software. It offers cross-platform compatibility, professional features, and costs nothing. Download OBS from obsproject.com, with a quickstart guide available here.
Keepthescore.com provides a browser-based leaderboard overlay system for OBS. The system delivers professional graphics, real-time updates, and remote score management through any internet-connected device. The basic functionality is free, with no software installation required.
The leaderboard can be controlled remotely from any device with a web browser, including smartphones and tablets. This allows a dedicated scorekeeper to manage rankings independently from the stream operator, even from a different location.
Overview of the Setup Process
Setting up a live leaderboard overlay involves three main steps:
- Create and customize a leaderboard on Keepthescore.com
- Obtain the overlay URL for streaming integration
- Add the overlay as a browser source in OBS
Step 1: Creating Your Leaderboard
Start by creating a customized leaderboard overlay for your specific event.
Click the button above to begin the setup process. The initial configuration takes approximately 1-2 minutes.
After creation, you'll see your control panel:
The leaderboard with it's control panel
This control panel serves as your command center for managing rankings during the stream. You can share the control panel URL with team members to allow collaborative score management.
Click participant names to edit them directly. The leaderboard supports extensive customization including color schemes and background images. Read more about customization here.
💡 TIP: Try setting some colors to be semi-transparent. You can alter transparency by using the right-most slider when you are editing a color value.
The control panel is fully responsive and works on mobile devices and tablets without requiring additional applications.
Step 2: Obtaining the Overlay URL
The overlay URL is the web address that connects your leaderboard to OBS. It follows this format:
https://keepthescore.com/board/vzrxdnpiedr/
To retrieve your overlay URL:
Click the "SHARE" button at the top of your control panel to access sharing options:
Select the "Share the public link" panel indicated by the arrow in the image above:
Click "COPY" to save the URL for the next step.
Step 3: Integrating the Overlay into OBS
The following instructions demonstrate adding the leaderboard overlay to your OBS scene:
Navigate to the Sources panel at the bottom of OBS and click the "+" button. Select "Browser" from the source type menu:
Accept the default settings by clicking "OK" in the dialog:
In the properties window, paste your overlay URL into the "URL" field. Set the width to 1200 and height to 1000
pixels:
Click "OK" to add the browser source. Your leaderboard overlay will appear in the preview:
Use the red transform handles to resize and position the overlay according to your stream layout. Your setup is now complete and ready for broadcasting:
All leaderboard modifications, including score updates, are managed through the Keepthescore.com control panel. Changes appear instantly in your stream overlay without requiring OBS restarts or scene refreshes.
Key Advantages of This Solution
Keepthescore.com offers several benefits for stream leaderboard integration:
-
No Software Installation: The entire system runs in web browsers, eliminating download and installation requirements.
-
Remote Score Management: Scorekeepers can update rankings from any location with internet access, using any device.
-
Free Core Features: Basic leaderboard functionality costs nothing, with optional premium features available.
-
Continuous Development: New features and competition modes are added based on user feedback and requests.
