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
  • Show as Standalone Screen
  • Show as Modal
  • Usage
  • Advanced Techniques: Deep Links
  • Register Customer
  1. Installing Gameball
  2. React Native

Initialize Gameball Customer Profile

Show your customer's profile including all details, customer reward campaigns, and the leaderboard on React-native app.

PreviousGetting StartedNextTrack Customer Events

Last updated 21 days ago

Showing the Gameball widget on your mobile application is slightly different than showing it on the website. You have two options; first, if you want to design your customer interface, you will use our set of REST APIs. To know more information, you can use the đź‘‘. The other option as this section elaborates, is through using our react native SDK.

Using the SDK, you can open the Gameball customer profile from a button in your app, programmatically when someone does something, or from a persistent button that sits over your app’s UI.

When you trigger the Gameball customer profile, your customer is presented with a home screen. This is configurable inside Gameball to change how it looks and what’s presented.

From there, your customer can check his progress across different Gameball programs as per your configurations.

To show the Gameball customer profile that contains the customer details, customer reward campaigns, and the leaderboard use the below steps.

import {GameballWidget} from 'react-native-gameball';

There are two ways to view the widget.

Show as Standalone Screen

<GameballWidget />

Show as Modal

<GameballWidget 
  modal={true}
/>

and then to open the widget you need to call the showProfile function on the ref property of the widget

The below is description of show customer profile parameters.

modal boolean Optional

Boolean value used to Indicates if you want to show the widget in modal view


openDetail string Optional

Specify if you want the widget to open on a specific view.

Open Detail Values
Value
View

details_referral

Navigates to the referral page directly.

details_redeem_coupons

Navigates to the coupons tab directly in the redeem page.

details_reward_campaign

Navigates to the reward campaigns page directly listing all the available reward campaigns.

details_reward_campaign_{CampaignId}

Navigates to a specific reward campaign details showing its progress.

details_wheels_list

Navigates to Wheels' list page directly.

details_wheel

Navigates to the first wheel details available from the wheels' list.

details_wheel_{WheelId}

Navigates to a specific Wheel Campaign with the given Id.

details_slot_list

Displays the list of available Slot Machines.

details_slot

Navigates to the first Slot Machine details available from the slots' list.

details_slot_{SlotId}

Opens a specific Slot Machine by its ID.

details_calendar_list

Displays the list of available Calendar campaigns.

details_calendar

Navigates to the first Calendar campaign details available.

details_calendar_{CalendarId}

Opens a specific Calendar campaign by its ID

details_scratch

Navigates to the first Scratch and Win available.

details_scratch_{scratchId}

Opens a specific Scratch and Win by its ID.

details_match

Navigates to the first Match game available.

details_match_{matchId}

Opens a specific Match game by its ID.


hideNavigation boolean Optional

Set to true to stop widget navigation otherwise leave as null

Usage

Class component

return (
      <View style={{ flex: 1 }}>
        <Button
          title={'open widget'}
          onPress={() => this.widget.showProfile()}
        />
        <GameballWidget
          ref={(ref) => this.widget = ref}
          modal={true}
        />
      </View>
)

Functional component

const ref = createRef();
return (
  <View>
    <Button title="Open modal" onPress={() => ref.current.showProfile()} />
    <GameballWidget modal={true} ref={ref} />
  </View>
)

Advanced Techniques: Deep Links

In certain scenarios, where you offer a product as a free reward, you might want to showcase this product within the Gameball widget along with a deep link. When customers click on the deep link, they will be seamlessly redirected to the product page within your app, where they can obtain more information and take further action. To enable this functionality, you need to follow the steps outlined below.

  1. Create a custom Gameball widget that is based on the default widget and implemented as a ForwardRefRenderFunction.

  2. Override the WebView's 'onShouldStartLoadWithRequest' event with a customized implementation.

    • In this implementation, detect URLs that begin with '{your_app_deep_link_prefix}://' to identify deep links specific to your app.

    • Handle these deep links using the main app's action to process and dispatch them, instead of relying on the WebView."

Register Customer

Register player method is used to create or update customers at Gameball. It is called when your login network call is successful.

First, import Gameball SDK as follows:

import {GameballSDK} from 'react-native-gameball';

then

GameballSDK.registerPlayer({
  "playerUniqueId": "{CUST_ID}",
  "deviceToken": "{deviceToken}",
  "referrerCode": "{referrerCode}",
  "playerAttributes": {
    "displayName": "{displayName}",
    "email": "{email}",
    "gender": "{gender}",
    "mobileNumber": "{mobile}",
    "dateOfBirth": "{dateOfBirth}",
    "joinDate": "{joinDate}"
  }
}).then(res => res.json()).then(jsonResponse => {...}) // on success

Once the APIKey and playerUniqueId have been registered, Gameball views can be made visible to the user.

playerUniqueId string Required

Unique identifier for the customer that you can reference across the customer’s whole lifetime. Could be a database ID, random string, email or anything that uniquely identifies the customer.


email string Optional

Customer's unique Email address.


mobile string Optional

Customer's unique Mobile number.


deviceToken string Optional

Token used to identify the device.


referrerCode string Optional


playerAttributes object Optional

Additional customer-specific attributes. Includes attributes such as the customer’s name, contact details, and purchase history.

playerAttributes Object

displayName string Optional

The display name of the customer.


firstName string Optional

The first name of the customer.


lastName string Optional

The last name of the customer.


email string Optional

Customer's unique Email address.


mobileNumber string Optional

Customer's unique Mobile number.


gender string Optional

The gender of the customer. Use "M" for male, "F" for female, or other identifiers as needed.


dateOfBirth string Optional

The customer's date of birth in the format YYYY-MM-DD.


joinDate string Optional

The date the customer joined your system, in the format YYYY-MM-DD.


preferredLanguage string Optional

The language the customer prefers for receiving notifications.


customAttributes Object Optional

Custom attributes related to the customer, defined by specific key-value pairs.rs.

Choose an Unchangeable Player Unique ID

Gameball user profile gets created using the playerUniqueId. It is highly recommended to have the unique ID as an identifier that would NEVER be changed. If this unique ID changes for a given customer, you risk losing all original data for that customer and hence losing their points and rewards on Gameball. Accordingly, it is NOT recommended to use the email address or the mobile number as the unique ID as both can be changed by the user at anytime.

The referral code of an existing customer who is referring the customer being created. This is required in the create customer request to process the referral. Check for more details

Configurations API
Track Referrals