How to create a simple esports overlay for tracking scores

A simple solution to adding a web-based score overlay to a live stream (e.g. using OBS). Perfect for streaming your favorite games on Twitch, YouTube and more.

Article Contents

An FPS being streamed and showing an overlay with scores

An esports score overlay is a graphic display, usually at the top or bottom of the screen during a livestream or recording of an esports game. This overlay provides real-time data and stats about the ongoing match.

Typical elements found in an esports score overlay can include:

  1. Teams' or Players' Names: The names of the competing teams or individual players, usually accompanied by their logos or avatars.

  2. Current Score: The current score of the match. This could be the number of rounds won in games like CS:GO or the number of kills in games like League of Legends.

  3. Match Time: The elapsed time of the current game or match.

  4. Game-Specific Information: Depending on the game, this can include information like the number of objectives achieved, player's health, mana or ultimate ability status in MOBA games like Dota 2 or LoL, bomb plant status in CS: GO, etc.

  5. Miscellaneous Information: Other things like the name of the tournament, sponsors, social media handles, etc.

These overlays are crucial in the esports industry. They allow viewers to follow along with the game more easily, keeping track of the current status of the match and the performance of the players or teams. They are usually designed to be as non-intrusive as possible, so they don't distract from the gameplay itself.

How do I create my own scoreboard overlay for OBS or other platforms?

We are going to use Keepthescore.com which has recently launched a simple score overlay that you can control from the browser. It allows you to create a fully customizable overlay which is added to your streaming software as a browser source.

The advantage of this solution is that you can delegate the actual scorekeeping to somebody else by sending them a link.

💡 NOTE: Some features, such as match time or game-specific information are not currently implemented. Please get in touch if you have feature requests.

To create your own overlay, begin by clicking the button below:

Congrats, you have just created your first overlay. Your screen should now look as follows:

The web-based control panel for a score overlay

The overlay control panel

The screen is divided into 3 sections:

Top section: Scoreboard

This shows a live preview of your score overlay. To get the link that you add to your streaming software, click the button that says "Open Display Scoreboard". The link must be added as a "browser source".

Once you have added the overlay to your stream, you can control the scores from this screen. Any changes you make to the scores or the styling will instantly be reflected on the live overlay.

Middle section: Controls

This is where you change the scores. Anyone who has access to this page can change the scores, even when your OBS instance is running on another computer. Click the button labelled "SHARE ADMIN LINK" to get the correct link to change the scores. Note that this is a different link to the one you add to your streaming software.

Bottom section: Setup

This is where you change the colors, team names and logos of your overlay.

Uploading a logo will replace the default trophy icon visible next to the team names.

Please note that customization of your overlay will eventually become a feature that requires pro membership.

💡 NOTE: The overlay cannot currently be controlled via a chatbot. If this is something you'd like, please get in touch.

Frequently asked questions

What is a web-based esports score overlay?

A web-based esports score overlay is a graphical display that shows real-time game stats during an esports match. It's web-based, so it's accessible from any device with an internet connection.

What kind of information can I display with the overlay?

You can display a variety of match-related information, including team or player names and current score.

How can I customize the overlay?

You can usually customize the overlay by changing colors, team logos and team names

Can I use the overlay for any esports game?

The overlay is designed to be game-agnostic, meaning you can use it for any esports game. However, you may need to manually input some game-specific data.

How do I add the overlay to my stream?

The process of adding an overlay to your stream will depend on the streaming software you're using. In general, you'll need to add a new source to your scene and link to your web-based overlay.

Does the overlay update in real time?

Yes, a key feature of esports score overlays is their ability to update in real time as the match progresses.

How does the overlay get game data?

You have to add the data manually. There is no automatic fetching of data from the game.

Can I use this overlay even if I'm not a professional streamer?

Absolutely. Esports overlays are useful for anyone streaming or recording gameplay, from professional esports events to casual matches among friends.

💡 One more thing Do you require a leaderboard instead? Then check out this post: how to add a leaderboard to your OBS stream.

Recommended Reading

You might also be interested in these related articles

Upgrade your CS:GO stream with custom scoreboard overlays from Keepthescore.com. Engage viewers with a professional, personalized layout.
Create Your Own CS:GO Scoreboard (Works With CS2!)

Upgrade your CS:GO stream with custom scoreboard overlays from Keepthescore.com....

Read article
Learn to host an online esports tournament with our beginner-friendly guide. Discover planning, game selection, tools, and tips to create an engaging,  event.
How To Host An Esports Tournament Online (Beginner Friendly)

Learn to host an online esports tournament with our beginner-friendly guide. Discover...

Read article
Enhance your Valorant streams with dynamic scoreboard overlays. Learn how to install overlays for better viewer engagement and professional aesthetics.
Valorant Scoreboard Overlay For Streamers

Enhance your Valorant streams with dynamic scoreboard overlays. Learn how to install...

Read article
Explore our beginner-friendly guide to using death counters in video games and on streaming platforms, enhancing your gaming experience
Death Counters in Video Gaming and Streaming

Explore our beginner-friendly guide to using death counters in video games and on...

Read article
Step-by-step instructions for adding a scoreboard overlay to your live stream. Ideal for StreamLabs software.
How to add a scoreboard overlay to Streamlabs Desktop

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

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

Stream live events with OBS and add a real-time, customizable leaderboard overlay from...

Read article
Learn to build an online leaderboard for hackathons easily with our user-friendly tool. Perfect for real-time score tracking and competition monitoring
A leaderboard tool for hackathons

Learn to build an online leaderboard for hackathons easily with our user-friendly...

Read article
Online leaderboards are an effective way to add simple gamification to your team, class, group, or religious community.
Leaderboards: the quickest way to implement gamification

Online leaderboards are an effective way to add simple gamification to your team,...

Read article
Enhance your video streams with custom scoreboard overlays. Learn how to create and implement using KeepTheScore.com's easy-to-use tools.
Add a Live Scoreboard Overlay To Your Stream

Enhance your video streams with custom scoreboard overlays. Learn how to create and...

Read article