The Game Mechanics (GM) Leaderboard add-on displays the top ranking users in a specific challenge.

Note: Game Mechanics is a premium platform that requires separate activation. If Game Mechanics is not part of your site package please contact your Gigya or contact us by filling in a support form on our site. You can also access the support page by clicking "Support" on the upper menu of Gigya's site.

 

Introduction

The Game Mechanics (GM) Leaderboard add-on displays the top ranking users in a specific challenge.

The leaderboard will only display users who have a name, email or provider.

Each site may have one or more challenges, and each challenge has defined levels. Each level has a badge associated with it, and a level title. A user may achieve a level in a certain challenge by performing actions and accumulating points for these actions. The user's points can then be used to calculate the user's rank compared to the rest of the challenge's users. To learn more about Gigya's Game Mechanics, refer to our Game Mechanics Guide.

The Leaderboard add-on displays a predefined number of users, each with their photo, name, and rank. Users with the same number of points are ranked the same. 

The top three users also have a medal icon:

In a logged-in state, the Leaderboard display is made up of three kinds of users:

In a logged-out state the leaderboard add-on just displays the highest ranking users.

 

In addition to the initial add-on display, you can click on any of the users to open an info popup:

The info popup displays the user's:

 

Quick Start Implementation

Implementation Overview

Adding the Leaderboard add-on is simple, and involves only adding a few lines of code:

Code Example

Add the following code snip to the of your page to activate the Leaderboard add-on:

<div id="divLeaderboard"></div>

<script>
    var leaderboardParams = {  
            containerID: 'divLeaderboard'  
    };  
    gigya.gm.showLeaderboardUI(leaderboardParams);  
</script>

 

Code Explanation

Step 1: Define the Leaderboard add-on's div

<div id="divLeaderboard"></div>

 

Step 2: Define the Leaderboard add-on parameters

var leaderboardParams = {  
        containerID: 'divLeaderboard'  
}; 

The Leaderboard add-on has one required parameter:

In addition there are a few optional parameters. Please refer to the method's parameters table for the entire list of optional parameters.

 

Step 3: Invoke the Leaderboard add-on

Call the gm.showLeaderboardUI API method:

gigya.gm.showLeaderboardUI(leaderboardParams);  

Like every Gigya API method, the gm.showLeaderboardUI API method receives one parameter - parameters object, which is the object we have defined in Step 2 (learn more about Gigya's basics here). 

Tie Breaking

Leaderboard ties are resolved according to who achieved the points first; if player A and player B both have 60 points, and player A reached 60 points before player B, then player A will be before player B on the leaderboard.

A Working Example

In the GM add-ons demo you will find a complete working example of a web-page that uses all GM add-ons, including the Leaderboard add-on. You may view the code, run it and view the outcome.