Customer Leaderboard

Displaying Customer Leaderboard

Use the Leaderboard API response to present a dynamic leaderboard view that showcases customer ranks, progress, and tier information effectively.

---

Response Example

{
  "leaderboard": [
    {
      "displayName": "John Doe",
      "customerId": "cust_12345",
      "progress": 2500,
      "rank": 1,
      "tierName": "Gold",
      "tierIcon": "https://cdn.gameball.co/uploads/gb-library/levels-icons/level-a1.webp"
    },
    {
      "displayName": "Jane Smith",
      "customerId": "cust_67890",
      "progress": 1800,
      "rank": 2,
      "tierName": "Silver",
      "tierIcon": "https://cdn.gameball.co/uploads/gb-library/levels-icons/level-a2.webp"
    }
  ],
  "customerRank": 1,
  "customersCount": 100
}

---

Ideas for Display

1. Leaderboard Overview

   • Display a ranked list of customers with:

     • Display Name: Show customer names prominently (e.g., "John Doe").

     • Rank: Indicate their rank in the leaderboard.

     • Progress: Highlight points or progress contributing to their rank.

     
2. Customer-Specific Rank

   • Provide a personalized section for the logged-in customer:

     • Highlight their rank, progress, and tier information.

     • Mention the total number of customers participating (e.g., “Rank 1 out of 100”).

3. Tier Visualization

   • Display each customer's tier using their tierIcon alongside their name and rank for instant visual recognition.

4. Filters for Leaderboard View

   • Allow filtering options for customers to explore leaderboard results by specific time frames:

     • Today’s leaderboard:

       http://api.gameball.co/api/v4/integrations/leaderboard?from=2024-11-24 00:00

     • Last month’s leaderboard:

       http://api.gameball.co/api/v4/integrations/leaderboard?from=2024-10-01 00:00&to=2024-10-31 23:59

     • All-time leaderboard: (No filters required)

       http://api.gameball.co/api/v4/integrations/leaderboard

     • Specific customer rank within a time frame:

       http://api.gameball.co/api/v4/integrations/leaderboard?from=2024-10-01 00:00&to=2024-10-31 23:59&playerUniqueId=player456

5. Progress Indicators

   • Include a progress bar to visually represent each customer’s progress relative to the highest rank.

   • Optionally, show percentage-based progress or milestones.

6. Call-to-Action for Engagement

   • Add actionable prompts, such as "Boost your rank by earning more points!" to encourage interaction.

---