Show Levels

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 players, where they can see the available levels that they can reach, along with each of the benefits they will get when reaching this level.

In order to do so, all you need to do is to call the configurations API and process the levels array within the response. Take a look at the below snippet where it shows a sample levels list 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 levels 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 levels array accordingly to build your own levels screen.

Using the Lang filter

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

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 player 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 Player Level Progress

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

After consuming the configuration API and getting the configured levels array you need to call the Retrieve Player API with the current player playerUniqueID as below

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

The response will result in a summarized view of the player’s progress over various Gameball programs as levels 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 levels array from the configurations API and the current player level + the next level progress we can achieve a similar UI to the below