Show VIP Tiers

Configurations API 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 configurations API 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.

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

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

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 Progress API in addition to the Config API 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.

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