All articles Broadcasting and streaming

How to add a scoreboard overlay to Streamlabs Desktop

Step-by-step instructions for adding a scoreboard overlay to your live stream. Ideal for StreamLabs software.

Contents

Are you looking to add a professional touch to your live stream? Whether you're streaming a gaming tournament, a sports match, or any other type of event, a scoreboard overlay can help keep your viewers informed and engaged. With StreamLabs, a popular streaming platform, adding a scoreboard overlay is easier than ever. In this article, we'll walk you through the steps to add an overlay to your stream.

💡 Note that this article applies to Streamlabs Desktop. If you are using the mobile app, read this instead.

What is Streamlabs?

Streamlabs is a popular and free live-streaming software that provides a wide range of tools and features for streamers. You can download it here. The software is based on OBS (Open Broadcaster Software), which is another very popular open-source streaming platform.

Streamlabs allows content creators to go live on various platforms, including Twitch, YouTube, and Facebook, and provides them with a suite of customizable widgets, alerts, and overlays to enhance their streams. It also provides detailed analytics, allowing streamers to track their growth and engagement, and features a donation system that enables viewers to support their favorite creators with ease.

A soccer game being shown on a TV with a scoreboard overlay

One thing that Streamlabs does not offer, however, is the ability to add a scoreboard overlay to your stream. This is where we, KeepTheScore.com, come in. We provide a free and easy-to-use solution that you can add to your Streamlabs stream in just a few minutes. Some features, such as uploading logos are paid, but the basic functionality is free. There are no watermarks or ads in our overlays.

Our product also comes with a stand-alone online scoreboard that you can share on social media or project onto a big screen. You are basically getting multiple scoreboards at once. All of them are live and update in real-time.

Top-level overview of adding the overlay

There are 3 steps to adding the scoring overlay to your live-stream. They are listed below and will be explained in more detail further down.

  1. Create a scoreboard on Keepthescore.com and customize it to your needs.
  2. Get hold of the overlay URL.
  3. Insert the overlay URL into Streamlabs.

Step 1: Create a scoreboard

In this step we create and customize the live scoreboard overlay. To begin, click here and then click the "CREATE SCOREBOARD" button to create a multipurpose scoreboard. You can also choose a specific sport from the dropdown labelled "CHOOSE YOUR SPORT"

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

OBS scoreboard control panel

Further down on this screen you can carry out all kinds of customizations, including changing the team names, colors and uploading logos.

You can also change the layout to be a scorebug layout, see below:

OBS scoreboard control panel

You will use this control panel to control the scores, once you have integrated the overlay into your stream.

💡 You can share the URL of the control panel to give someone else the ability to change scores.

Step 2: Get hold of the overlay URL

Next, we will get hold of the overlay URL (it will look something like this: https://keepthescore.com/stream/vzrxdnpiedr/).

Click on the orange "GET SCOREBOARD" button at the top of the control panel. See below:

KeepTheScore.com control panel for a streaming overlay

Click on the "COPY TO CLIPBOARD" button on the dialog that appears. The URL should now be copied to your clipboard.

KeepTheScore.com control panel for a streaming overlay

Onto the final step!

Step 3: Insert the overlay URL into Streamlabs

The image below shows the main Streamlabs window with a placeholder image instead of the live stream. We will add our scoreboard overlay to this placeholder image.

OBS scoreboard control panel

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

OBS scoreboard control panel

You will be asked to enter a name for the source and after clicking "Add source" again, you will see the following screen. This is where you paste the URL you copied earlier into the URL field. You should also change the width to 1200 as shown below. Finally, click on "CLOSE".

OBS scoreboard control panel

Your new scoreboard overlay should now be visible as shown on the screenshot below. Adjust the size of the overlay by dragging the green frame.

OBS scoreboard control panel

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

OBS scoreboard control panel

You are now ready to start streaming! 🎉

Change the scores by going back to the control panel on KeepTheScore.com. You can of course also update the scores on a mobile device or tablet.

Advantages of our solution

Just to remind you why the Keepthescore.com solution is great:

  • No software install is required to create or use the scoreboard overlay. All you need is a device that is capable of accessing the internet and has a browser.
  • The person who is doing the score-keeping can be anywhere in the world.
  • It's free for basic use, but some extra features are paid.
  • A standalone scoreboard for sharing on social media or projecting onto a screen also comes included.
  • We will be adding features and new sports according to what YOU request.