Gigya Job Openings

Page History

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
SEO Metadata

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

...

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

...

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 plugin displays 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. 

...

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

...

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

...

Implementation Overview

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

  • Step 1: Define the section (div) where the Leaderboard plugin should add-on should be embedded.
  • Step 2: Define the Leaderboard plugin add-on's parameters.
  • Step 3: Call the gm.showLeaderboardUI API to activate the Leaderboard plugin add-on.

Code Example

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

Code Block
languagejs
linenumberstrue
<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

Code Block
languagenone
linenumberstrue
<div id="divLeaderboard"></div>

 

Step 2: Define the Leaderboard

...

add-on parameters

Code Block
languagejs
linenumberstrue
var leaderboardParams = {  
        containerID: 'divLeaderboard'  
}; 

The Leaderboard plugin has add-on has one required parameter:

  • containerID - the identifier of the DIV element, where the Leaderboard plugin should add-on should be embedded.

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:

...

A Working Example

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