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
  • Gameball Customer profile sync
  • Show Gameball Customer profile
  • Pass customer data to your Webview
  1. Installing Gameball
  2. Generic Mobile App

Initialize Gameball Customer Profile

Show your user's customer including all details, customer reward campaigns, and the leaderboard.

PreviousGeneric Mobile AppNextTrack Customer Events

Last updated 6 months ago

This guide is not framework specific. Below is a general high level guideline illustrating how to integrate Gameball with applicable mobile frameworks

Gameball Customer profile sync

The first touch point is the login/registration screen. This is where users create an account or sign in to an existing account in your app. Gameball requires customers' profiles to be synced to track their progress and reward them accordingly.

Customer profiles can be synced using the method. Where it creates or updates the customer's profile with each call.

It's recommended that the is called with every login or account update.

Depending on your app design, profile sync API calls can be made from your backend system or from within the app.

Show Gameball Customer profile

The second touch point is to show the customer's loyalty profile from Gameball within your app. This is where customers can view their progress, points, and rewards.

There are two ways to integrate Gameball loyalty profile into your mobile app:

  1. Using the out-of-the-box widget

  2. Using our .

Gameball offers pre-built widget that you can easily add to your mobile app if your framework supports Webviews.

let's illustrate the sequence to show Gameball profile widget using Webview:

  1. Add menu item to your app menu or customer's profile page.

  2. Upon click, open Webview that points to a self-hosted webpage with Gameball widget scripts embedded in it.

  3. Pass customer's data to Webview

The first step is to create a blank HTML page and host it at your desirable domain path as below

https://yourdomain.com/webview-address/index.html

This created empty page will be responsible to load Gameball widget for your mobile app user.

<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: '{{CUST_ID}}',
            lang: 'en',
            playerAttributes:{},
            APIKey: '{{Your_API_Key}}'
        });
    };
</script>
<script defer src="https://assets.gameball.co/widget/js/gameball-init.min.js"></script>

For mobile app case, a new parameter must exist in the loading script

mobile:true

So the loading script would be as below

<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: '{{playerUniqueId}}',
            lang: 'en',
            playerAttributes:{},
            APIKey: '{{Your_API_Key}}',
            mobile:true
        });
    };
</script>
<script defer src="https://assets.gameball.co/widget/js/gameball-init.min.js"></script>

Pass customer data to your Webview

The widget will display customer's profile depending on the passed parameters to the init script. In order to pass customer's data from your mobile app to Webview\Gameball's Widget, there are two options depending on your framework capabilities.

If the used framework supports passing params\variables to Webview you can pass logged in customer profile data directly to the Webview and inject them to Gameball widget loading script.

The other option is to pass customer's data to Gameball loading script via query strings while loading Webview as the example below:

https://yourdomain.com/webview-address?playerUniqueId={{playerUniqueId}}&displayName={{displayName}}

Once the data is added to the query string, you can use JavaScript to retrieve the data and pass it to the Gameball widget script. Here's an example of how you can do this:

<script>
    // Get the query string parameters
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    // Get the user's email and display name from the query string
    const playerUniqueId= urlParams.get('CUST_ID');
    const userDisplayName = urlParams.get('displayname');

    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: {{CUST_ID}},
            mobile:true,
            playerAttributes: {
                displayName: {{displayName}}
            },
            lang: 'en',
            APIKey: '{{Your_API_Key}}'
        });
    };
</script>

By following the steps outlined above, you can easily pass customer data to the widget script and provide your users with a seamless and personalized experience.

If you choose to go with using the pre-built widget in a Webview. You need to take care of the Webview interactions within your app. How the user can navigate from and to the Webview easily. We recommend showing the Webview as a modal with a back button on top.

On page header include Gameball widget loading script as described in

Install Gameball Profile section
extensive APIs to render your desired UI elementsđź‘‘
Create Customer API
Create Customer API