How to add a live leaderboard to your OBS stream

Stream live events with OBS and add a real-time, customizable leaderboard overlay from Keepthescore.com. Free, easy setup, and mobile-friendly score management.

23 July, 2023 Broadcasting and streaming

Contents

Are you streaming a live competitive event using OBS (Open Broadcaster Software) or similar software? If you want to add live rankings to your stream then this post will go through how you can achieve this goal.

OBS is fast becoming the de facto standard software for streaming. It is free, available for all major platforms, and user-friendly. You can download it here. A quickstart document is also available here.

With Keepthescore.com, it's pretty straightforward to add a leaderboard overlay for OBS. The overlay looks professional, is easy to set up, updates in real-time and the basic version is completely free!

You can even manage the rankings from a phone, without the need for any additional apps. This means that the person controlling the leaderboard can be someone else to the person using OBS. They can even be somewhere else entirely, as long as they have an internet connection.

OBS leaderboard

How does it work?

There are 3 steps to getting it set up. Each step is explained in more detail below but here is the overview:

  1. Create a leaderboard on Keepthescore.com and customize it to fit your event.
  2. Obtain the overlay URL.
  3. Insert the overlay URL into your streaming software.

Step 1: Create a leaderboard

In this step, we create and customize the live leaderboard overlay. To begin, click here to create your leaderboard and fill out all required fields. You can do this without having to register an account.

You will then see the following. This is your "control panel".

OBS leaderboard control panel

You will use this control panel to change the rankings, once you have integrated the overlay into your stream. You can also share the URL of the control panel to give someone else the ability to adjust the scores and rankings.

Click on the participant names to edit them. Many properties of your leaderboard are configurable, including colors and the background image.

💡 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 also works great on a mobile device or tablet, without requiring any extra apps.

Step 2: Get hold of the overlay URL

Next, we will obtain the overlay URL — which is another way of saying a "link". It will look something like this: https://keepthescore.com/board/vzrxdnpiedr/. This is all you need to insert the overlay into your stream.

Click on the orange "PUBLISH" button at the top of the control panel. You will then see a screen like this:

KeepTheScore.com control panel for a streaming overlay

Click the panel "Share the public link" that the arrow is pointing to in the image above. Now you will see this:

KeepTheScore.com control panel for a streaming overlay

Click on the blue "COPY TO CLIPBOARD" button. The required link should now be copied to your clipboard.

Onto the final step!

Step 3: Insert the overlay URL into OBS

The image below shows the main OBS window with a placeholder image instead of the live stream. Some docks have been disabled to keep things simple. We are now going to go through the steps to add our leaderboard overlay.

OBS leaderboard control panel

First we are going to add a new "source". Go to the source window at the bottom and click on the "+" button. Then click on "browser".

OBS leaderboard control panel

Accept the defaults in the modal dialog by clicking on "OK".

OBS leaderboard control panel

In the next screen you paste the URL you created in step 2 into the "URL" field. You should also adjust the width field to 1200 and the height field to 1000. See below:

OBS leaderboard control panel

Click on OK, and your new browser source should be added and visible as below:

OBS leaderboard control panel

You can use the red frame to adjust the size of the overlay and position it as you require. You are now ready to start streaming! 🎉

OBS leaderboard control panel

To change anything about your leaderboard (including the scores!) go back to Keepthescore.com and make your changes there.

Anything you do will automatically be reflected in the overlay you just added. It's a little bit like magic 🪄

Advantages of our solution

Here's a quick recap of why Keepthescore.com is a goof solution for adding a leaderboard to your stream:

  1. No software installation is required to create or use the leaderboard overlay. All you need is a device that can access the internet and has a browser.
  2. The person who is doing the score-keeping can be somewhere else, as long as they have internet access.
  3. It's free for basic use, with some paid extra features.
  4. We will be adding features and new competition modes based on what YOU request.

Please give us feedback!

Do you have a question, feedback, or a feature request?

Great! We answer every message within 1 working day (sometimes on the weekend too). Write us an email