Leaderboard (Points System)

Import Code

leaderboard.sb (4.4 KB)


In Streamer.bot in select Import from the top left.
Download the Import Code and drag and drop the .sb into the Import String box.

Both Codes will need the following references in order to compile.


The Following Commands will import but will need to be enabled.


When using the command you can specify which platform you want so for example you can do !rank youtube to just get the YouTube users this is handy for those who multi-cast, if you don’t multi-cast then just doing !rank will be fine as that will bring in everyone anyway, which won’t include any other platforms apart from the one you are using.

You may want to add you own movement/effects on this.

Code Pen (optional)

The Codepen can be altered if you so wish, you can change the title on the leaderboard by changing the Top Points text in the html. You can also change the colours if you wish by playing with the CSS. Around line 134 there is a nth-child and under that it say background, altering that hexcode will change the color.

My advice would be to fork the code pen, by clicking fork in the bottom right, that way you can save and then as you change things and refresh if something goes wrong without losing all the work you’ve done. I would also check that it is working before downloading.

Once you’ve got the code pen how you like it, you will need to export it. You can do this by pressing export > download .zip. Once downloaded, extract the files and put them somewhere safe. The next step is to open the dist folder and open the index file. Copy and Paste the url of that file into a browser source within OBS or SLOBS.

Its also should be noted that this codepen now works over Websocket, so you’ll either need to make sure you on wsport or edit in the script.js


boardSize This is the amount of users you want it to show when you do !rank
valueName This is the name of your points.

The code will return a number of Variables.

Variable Purpose/Value
fullList This will return the list as a whole string for you to output as a message.
gdiList This will also return the full list but with an added \n so it can be put into textGDI sources and force new lines
userPos[X] This will state the position the user is in. **
userName[X] This is the name of the user. **
userValue[X] This is the amount of points the user has. **

** X is replaced by an index

By using these variables you can create your own out put message.

You can use the default given one of Points Are As Follows : %fullList% or you can do something more personalised such as

The Point Ranks are as follows. Taking Bronze is %userName2% with %userValue2% points, Silver goes to %userName1% who has %userValue1% points and with %userValue0% points GOLD goes to %userName0%!! GGs

It’s important to note that if you choose a number too high for boardSize the message may not post due to twitch’s or YouTube’s message character limit. Default for this is 5.