Initialize Gameball Customer Profile

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

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 follow this guide. 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

Usage

Property	Type		Required
modal	Boolean	In order to show the widget in Modal view
openDetail	String
hideNavigation	Boolean	Hide navigation bar in the widget header

Example on running the widget as a Modal:

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."