You have lots of ways to make your interactions sticky and engaging, including using all types of media files, customizing your look and feel, using instant answers, and more. And now, you have another! We're introducing Leaderboards, a fun way to show your users how they compare to others.

You can create a leaderboard in the “Motivation” tab by simply clicking the button “Create Leaderboard”:

You can rename the leaderboard (the title will be visible to your users), decide how many participants per screen you want to display, and even embed the leaderboard in your website so it is visible and easily accessible:

After you create the leaderboard, you can preview/edit/delete it in the Motivation Tab. You can see the leaderboard in the context in the Results View. This is how the quiz participant will see it:

The quiz participant will only see the leaderboard option if they pass the quiz. Other interactions (polls, surveys, forms, outcome quizzes) do not support the leaderboard feature.

Customize Leaderboard Look & Feel

After creating a leaderboard, you have the option to customize its appearance. To do this, go to the Results View, locate the Leaderboard block, and click on the edit icon as shown in the image:

You can customize various elements of your leaderboard, such as the headline, image, and input text. This allows you to create a unique look and feel for your leaderboard. Here’s just one example of how you can make a leaderboard that compliments the theme or general vibe of your interaction.

Embed Leaderboard in an iframe supported module

By default, CredSpark uses embed code that contains Javascript in it. If you want to embed the leaderboard somewhere that allows only iframe code, you would need to change the default JavaScript code to iframe code. We'll explain how to do that with interactions and collections leaderboards.

Interaction leaderboard

For interactions Leaderboards, you need to replace {QUIZ_ID} with the part shown in data-quiz-id property in the original embed code.

To find the original JavaSript embed code for interactions leaderboards, navigate to:

Open prefered interaction --> "Motivation" tab --> "Edit" leaderboard (If already created) --> You'll find it in the original embed code.

Example of original interaction leaderboard Javascript embed code:

class="credsparkLeaderboard" data-quiz-id="test-quiz-a9d53d0b176ac"></div>

The correct iframe code in this first example would be:

NOTE: if you are in an EU data center (access the app via eu.app.credspark.com), then your iframe would need to look like this:

Collection leaderboard

For collection, it's similar to the interaction leaderboard, but you will need to use a different base of iframe code:

You need to replace {COLLECTION_ID} with the part shown in data-collection-uuid property in the original embed code.

Example of original collection leaderboard Javascript embed code:

class="credsparkLeaderboard" data-collection-uuid="9829377d-dfaa-4fce-ac7c-4cbad9a18ea3"></div>

The correct iframe code in this second example would be:

NOTE: if you are in an EU data center (access the app via eu.app.credspark.com), then your iframe would need to look like this:

Customize Leaderboard Look & Feel

Embed Leaderboard in an iframe supported module

Interaction leaderboard

Collection leaderboard

Related Articles