How to add a scoreboard overlay to Streamlabs Desktop

23 November, 2023 Broadcasting and streaming All articles

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 an easy-to-use solution that you can add to your Streamlabs stream in just a few minutes.

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 a scoreboard. To begin, click the button below 👇 and choose your sport.

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

Control panel for an online scoreboard Control panel for an online scoreboard

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:

Changing the layout for an online scoreboard Changing the layout for an online scoreboard

You will use this control panel to control the scores.

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

Step 2: Get hold of the scoreboard URL

Next, we will get hold of the public scoreboard URL. Note that this requires PRO membership.

Click on the "Open Display Scoreboard" button at the top of the control panel. See below:

1. Getting the scoreboard link 1. Getting the scoreboard link

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

1. Getting the scoreboard link 2. Getting the scoreboard link

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 scorekeeping can be anywhere in the world.
  • 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.