Description
The Ranking Widget allows you to display the user leaderboard based on scores achieved in one or more game modules. You can integrate it anywhere within your customer journey to boost engagement.
This module is useful after one or several score-based game(s)
Installing the Widget
The leaderboard is not limited to a single page. It is a component you can place according to your needs:
Adding via the Widgets section: Click on the "+" button in the editor and drag the "Rank" widget onto the page of your choice (Pre-game page, Result page, End page, etc.).
Multi-display: You can add two ranking widgets on the same page (for example: a weekly ranking and an overall ranking).
Dedicated page: Add a page (basic or other) and simply add the default widget, which you can customize.
Configuring the Widget
Game page: Select the game(s) for which you want to display the players' leaderboard. For example, if you want to display a ranking for a Megajump game, select "Megajump" under Game page. If you select "All", it will display the leaderboard across all games present in the campaign.
āTop display: Choose the number of participants to display in the list (Top 10, 50, 100, 200, or 500).
āTime filter: You can choose between several time filters for displaying scores: global (entire campaign duration), day, week, month.
ā ļø If you run a multilingual campaign, the leaderboard will be shared across all languages (e.g., a player on the English version can appear alongside a player on the French version).
Score display: Select the display type based on:
Highest score: Only the user's single best performance is retained, across all participations and game mechanics.
Cumulative scores: All points earned by a player across all their game sessions are added up.
Best cumulative scores: Sums the best scores from each score-based game mechanic available in the campaign.
ā
āļø In case of a tie: The first user to reach that score will be ranked higher, regardless of their initial participation date.
Filter by store / point of sale: Enable this option only if you want users to filter by their store/point of sale. This field must be included on the form.
List Appearance
Display type: Choose the display format corresponding to the name visible on the leaderboard:
First name + Last name
First name + Shortened last name (e.g., Simon D.)
First name only
Username / Handle (field must be added to the form)
Separator line color: Customize the line color between each player in the leaderboard.
ā
āFonts: Add your custom font to the list layout, and adjust its size and color.
āHighlight current player: Make the user's own participation stand out using color options, bold, italic, and/or underline settings. You can also pick a specific background color to highlight their entry.
Pagination and Filter Appearance
Fonts: Add your custom font to the pagination and filters, and adapt its size and color.
āCustomizable elements:
Background color
Current page background color
Text color
Border radius: Adjust the rounding of the leaderboard rows to match your campaign's design (from square to fully rounded).
ā ļø Warning: A campaign leaderboard can incentivize malicious behavior (cheating to reach top ranks).
Mobile Setup
Once your Desktop page is configured, switch to Mobile view to import the dedicated background and format your page for mobile devices. To import a Mobile background, follow the same procedure as for Desktop.
The mobile background image must be in .jpeg or .png format. Recommended dimensions are 640px wide with a flexible height depending on screen sizes and content length.
Other Available Settings
Need help?
Get support from our online team by clicking the chat bubble š¬