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:
-
Teams' or Players' Names: The names of the competing teams or individual players, usually accompanied by their logos or avatars.
-
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.
-
Match Time: The elapsed time of the current game or match.
-
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.
-
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 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.
📺 Looking for traditional sports overlays? Check out our guides for basketball scoreboards and football scoreboards in OBS.
