Easy Leaderboard in Articulate Storyline - Quick Guide

The question how to add a leaderboard to a learning course has been coming up quite often in the discussions on e-Learning Heroes, so I decided to put together a quick guide that will help you have your leaderboard up and running in just a few minutes.

Step 1

I use the Cluelabs widget for leaderboards, so the first step is to select "Leaderboard" from the list of widgets in Stencil editor and click on "+ New..."

Step 2

Set widget options, such as name, authoring tool, size, colors, etc. and click "Save."

Step 3

Follow the instructions you will see on your screen to add variables in Storyline.

Step 4

Copy the JavaScript code provided and paste into the Script window of a Storyline trigger.

Step 5

Locate the slide where you want to display the leaderboard, insert a web object, and paste the widget URL into the Address field.

And you're done!

This was a quick step-by-step guide, but if you need more detailed explanations of the leaderboard settings and options, you can reference this article.

To see a leaderboard in action you can check this recent e-Learning Heroes project.

10 Replies
Tracy Carroll

Hi Nicholas,

I didn't know that this existed until a few days ago! In the Community Support forum, they do address the issue of refreshing the leaderboard automatically, and they show how to do it in Storyline.

Click the image below if you want to see an example demo I created, using the leaderboard widget from Cluelabs!


Tracy Carroll

I've only tried this out with the demo on my portfolio site, so I haven't had issues with blocking so far. I do quite a bit of work for pharmaceutical companies, and they do tend to block everything, as you mentioned. I'm going to create a game for one pharmaceutical company soon, and we're going to try out the widget.