Gameball Developers Guide
v4.0
v4.0
  • Introduction
  • Installing Gameball
    • Web
      • Initialize Gameball Customer Widget
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Track Referrals
      • Go-Live Checklist
    • iOS
      • Getting Started
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Push Notifications
      • Track Referrals
      • Go-Live Checklist
    • Android
      • Getting Started
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Push Notifications
      • Go-Live Checklist
    • React Native
      • Getting Started
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Track Referrals
      • Push Notifications
      • Go-Live Checklist
    • Flutter
      • Getting Started
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Track Referrals
      • Go-Live Checklist
    • Generic Mobile App
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Orders & Cashback Reward
      • Integrate Redemption
      • Track Referrals
      • Push Notifications
  • REST API
    • Overview
      • What's New in V4.0
      • Authentication
      • Rate Limiting
      • Status and Error Codes
    • Customers
      • Customer Management
      • Customer Progress
      • Customer Tags
      • Customer Notifications
    • Events
    • Order
      • Order Tracking
      • Order Rewards & History
    • Payment
      • Payment Tracking
    • Transactions
      • Cashback & Redemptions
      • Hold Management
      • Transaction Management
      • Transaction Validation
    • Coupons
    • Configurations
      • Reward Configurations
      • Program Configurations
      • Widget Configuration
    • Leaderboard
    • Batches
      • Batch Creation
      • Batch Management
  • Webhooks
    • Overview
    • Subscribing to Webhooks
    • Webhook Topics
      • Customer's Notifications
      • Customer's Profile Updates
  • Tutorials
    • Tracking Customer Events
    • Redemption Integration
      • Direct debit redemption
      • Coupons Redemption
        • Use Your Own Couponing Engine
        • Gameball Couponing Engine
    • Checkout Integration
    • Build Custom UI Elements
      • Reward Campaigns
      • VIP Tiers
      • Customer Balance
      • Widget Configurations
      • Coupons Customer Experience
      • Customer Notifications
      • Customer Leaderboard
    • Build your Own Notification System
    • Channel Merging Guide
    • Previewing Potential Points Before Purchase
    • Refund
    • Retail & POS Integration with Gameball Loyalty Program
    • Referrals
    • Widget Deep Links
    • Batch APIs usage example
  • Branch.io Integration
  • Adjust Integration
Powered by GitBook
On this page
  1. Tutorials
  2. Build Custom UI Elements

Customer Leaderboard

Displaying a Dynamic Customer Leaderboard

PreviousCustomer NotificationsNextBuild your Own Notification System

Last updated 5 months ago

A well-designed leaderboard can drive engagement by showcasing customer rankings, progress, and achievements. By using the , you can create a dynamic and interactive leaderboard that highlights top-performing customers and keeps everyone motivated to level up.

In this guide, we’ll walk you through how to use the API to:

  • Fetch Customer Leaderboard Data: Retrieve real-time rankings, tier information, and progress for your customers.

  • Showcase Ranks and Achievements: Display customer positions on the leaderboard along with their earned rewards and milestones.

  • Highlight Progress: Make it easy for users to track how close they are to the next rank or reward, motivating continued participation.

By the end of this tutorial, you’ll be able to create an engaging leaderboard that not only highlights top customers but also encourages others to strive for the next tier.


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.


Leaderboard API