Gameball Developers Guide
v3.0
v3.0
  • Introduction
  • What's New in V3.0
  • Installing Gameball
    • Web
      • Show 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
      • Track Referrals
      • Push Notifications
      • Go-Live Checklist
    • Android
      • Getting Started
      • Initialize Gameball SDK
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Referrals
      • 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
      • Migration from v1 to v2
    • Flutter
      • Getting Started
      • Initialize Gameball SDK
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • 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
    • Retail & Modern POS
      • Initialize Gameball Customer Profile
      • Track Orders & Cashback Reward
      • Track Refunds
      • Enable Redemption
        • Prepare POS for Redemption
        • Using Virtual ID
          • Using Virtual Card
  • REST API
    • Overview
      • Server-Side SDKs
    • Authentication
    • API Reference
      • Customer
      • Event
      • Transactions
      • Order
      • Coupons
      • Leaderboard 👑
      • Notifications 👑
      • Configurations 👑
      • Batches 👑
        • Batch Operations Data
      • OTP
      • Partner 🤝
        • Client 🤝
        • Redemption Rule 🤝
        • Cashback Rule 🤝
    • Webhooks
      • Notifications Webhook
      • Customer Profile Webhook
    • Errors
    • Object Reference
  • Tutorials
    • Build Custom UI Elements 👑
      • Display Reward Campaign Progress
      • Show VIP Tiers
      • Show Customer Points Balance
      • Build Leaderboards
      • Show Notifications Inbox
      • Adapt UI to Configurations
      • Advanced UI Techniques
        • Increase Sales with Cashback UI Elements
        • Derive Engagement with Rewards Campaigns UI Elements
    • Tracking Customer Events
    • Build your Own Notification System
    • Checkout Integration Example
    • Redemption Integration Options
      • Redeem with coupon system
        • Integrate your coupon system
          • Example using e-commerce platform(WooCommerce)
          • Example using a custom coupon system
        • Build couponing experience
          • Using Gameball widget
          • Build custom experience
            • Showing customers available points
            • Allowing customers to create coupons
            • Apply the discount code to your cart
        • Coupon integration reference
      • Redeem with direct debt
        • Get customers points balance
        • Redeem customer points
  • Third Party Integrations
    • Segment Integration
Powered by GitBook
On this page
  1. Tutorials
  2. Build Custom UI Elements 👑

Display Reward Campaign Progress

PreviousBuild Custom UI Elements 👑NextShow VIP Tiers

Last updated 1 year ago

helps you display the customer's progress in different Gameball programs within your app or web page. It returns the customer's progress in reward campaigns, VIP tiers, wallet points balance, and referrals, in addition to other information related to the customer.

Let's begin with a simple use case where you would like to show the customer their progress in achieving the available reward campaigns

All the needed information is available in the reward campaign progress array within the customer's progress API response, as follows:

"challengesProgress":[
    {
        "id":"123",
        "name":"Welcome",
        "description":"Welcome Challenge",
        "isUnlocked":true,
        "highScoreAmount":null,
        "completionPercentage":0,
        "isRepeatable":false,
        "achievedCount":0,
        "icon":"https://cdn.gameball.co/uploads/client776/643323652begb.png"
    },
    {
        "id":"p123",
        "name":"Place Order",
        "isUnlocked":true,
        "highScoreAmount":null,
        "completionPercentage":55,
        "isRepeatable":true,
        "achievedCount":2,
        "icon":"https://cdn.gameball.co/uploads/client776/a643323652begb.png"
    }
]

The reward campaign progress holds the progress of the customer against every eligible reward campaign. Let's examine each reward campaign attribute returned by the reward campaign progress array and see how they can help us in building the UI.

First thing we may use is the id, name, description and icon. These attributes can be used to draw the eligible reward campaigns list for the customer without progress information.

Now let's say you want to highlight the achieved reward campaigns and dim the non achieved reward campaign on your UI. You can easily do this by checking the achievedCount attribute. Where a 0 represents not yet achieved and 1 or more denotes that a reward campaign was achieved at least once.

In our example the Welcome reward campaign achieved count is equal to 1 and First Order reward campaign achieved count is equal to 0, hence we will be adding a dimming style for the First Order reward campaign icon.

For reward campaigns where a customer has done a progress but not yet completed, you can make use of completionPercentage attribute where it represents the current progress. Let's say we have a reward campaign “Tenth Order” that the user will achieve when making 10 orders. If the user completed 6 orders, the response will look like this:

{
    "id":"p123",
    "name":"Tenth Order",
    "isUnlocked":true,
    "highScoreAmount":null,
    "completionPercentage":60,
    "isRepeatable":false,
    "achievedCount":0,
    "icon":"https://cdn.gameball.co/uploads/client776/a643323652begb.png"
}

Customer's Progress API