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
  • Using the Lang filter
  • Show Customer VIP Tier Progress
  1. Tutorials
  2. Build Custom UI Elements 👑

Show VIP Tiers

PreviousDisplay Reward Campaign ProgressNextShow Customer Points Balance

Last updated 1 year ago

can be used in many scenarios when building your own UI. It provides information about the current program's configurations, in addition to control declaratives that can be managed from your Gameball’s account dashboard. Let's assume that within your app you would like to build a page for your customers, where they can see the available VIP tiers that they can reach, along with each of the benefits they will get when reaching this VIP tier.

In order to do so, all you need to do is to call the and process the VIP tiersarray within the response. Take a look at the below snippet where it shows a sample VIP tierslist as returned within the configuration response.

{
...
...
"levels":[
   {
  	"minProgress":0,
  	"order":1,
  	"icon":"https://cdn.gameball.co/uploads/007/7e3.png",
  	"name":"Basic",
  	"benefits":{
     	"amountRewardThreshold":null,
     	"rankReward":null,
     	"walletReward":null,
     	"levelDiscount":null,
     	"discountCapping":null,
     	"others":[]
  	}
   },
   {
  	"minProgress":5000,
  	"order":2,
  	"icon":"https://cdn.gameball.co/uploads/007/7es3.png",
  	"name":"Silver",
  	"benefits":{
     	"amountRewardThreshold":null,
     	"rankReward":null,
     	"walletReward":null,
     	"levelDiscount":5,
     	"discountCapping":null,
     	"others":[]
  	}
   },
   {
  	"minProgress":10000,
  	"order":3,
  	"icon":"https://cdn.gameball.co/uploads/007/ae3.png",
  	"name":"Gold",
  	"benefits":{
     	"amountRewardThreshold":null,
     	"rankReward":null,
     	"walletReward":null,
     	"levelDiscount":15,
     	"discountCapping":null,
     	"others":[
         "Next day delivery for free"
     	]
  	}
   },
   {
  	"minProgress":20000,
  	"order":4,
  	"icon":"https://cdn.gameball.co/uploads/007/ae4.png",
  	"name":"Platinum",
  	"benefits":{
     	"amountRewardThreshold":null,
     	"rankReward":null,
     	"walletReward":null,
     	"levelDiscount":35,
     	"discountCapping":null,
     	"others":[
         "Next day delivery for free",
         "Selected Free Product each month"
     	]
  	}
   }
]
...
...
}

Four VIP tiers are configured within the program: Basic, Silver, Gold and Platinum. Each with its benefits, name and icon. In your custom UI screen you can bind the VIP tiers array accordingly to build your own VIP tiers screen.

Using the Lang filter

In case your app or web page supports different locales and changes based on your customer's preferences. After configuring your supported locales in Gameball, you will need the API response text to match the locale of the current customer.

To do so, you can provide the optional Lang query filter to your API call so that Gameball can respond using the corresponding configured locale.

For example, if your app supports English and French, and the current customer using the app selected French as his preferred language. All you need to do is to call the API as follows:

https://api.gameball.co/api/v3.0/integrations/config?lang=fr

Show Customer VIP Tier Progress

After consuming the configuration API and getting the configured VIP tiers array you need to call the Retrieve Customer API with the current customer playerUniqueID as below

https://api.gameball.co/api/v3.0/integrations/player/{playerUnqiueId}/progress

The response will result in a summarized view of the customer 's progress over various Gameball programs as VIP tiers and points. For the scope of this tutorial we will only focus onlevelsProgressobject.

{
  "playerUniqueId": "player456",
  ...
  ....
  "levelsProgress": {
    "current": {
      "order": 1,
      "name": "level 1",
      "minProgress": 0,
      "progress" : 1300,
      "icon": "https://cdn.gameball.co/uploads/client/l1.png"
    },
    "next": {
      "order": 2,
      "name": "level 2",
      "minProgress": 2000,
      "progress" : 0,
      "icon": "https://cdn.gameball.co/uploads/client/l2.png"
    }
  },
  ...
  ...
  
}

Now that we have the all VIP tiers array from the configurations API and the current player VIP tier + the next level progress we can achieve a similar UI to the below

In order to better understand how to configure your languages and know their respective language codes, check this in our Help Center.

Now that you have shown the configured VIP tiers in your program. You may need to show the current logged-in customer VIP tier progress. This can be done by using the in addition to the to create a progress bar, a VIP tier indicator, or any other visual element that shows the customer 's progress. By displaying progress to customers, you can provide a sense of accomplishment and motivation for the customers to keep progressing.

Configurations API
configurations API
article
Config API
Progress API