Gameball Developers Guide
v3.0
v3.0
  • Introduction
  • What's New in V3.0
  • Installing Gameball
    • Web
      • Show 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
      • Track Referrals
      • Push Notifications
      • Go-Live Checklist
    • Android
      • Getting Started
      • Initialize Gameball SDK
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • Track Referrals
      • 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
      • Migration from v1 to v2
    • Flutter
      • Getting Started
      • Initialize Gameball SDK
      • Initialize Gameball Customer Profile
      • Track Customer Events
      • 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
    • Retail & Modern POS
      • Initialize Gameball Customer Profile
      • Track Orders & Cashback Reward
      • Track Refunds
      • Enable Redemption
        • Prepare POS for Redemption
        • Using Virtual ID
          • Using Virtual Card
  • REST API
    • Overview
      • Server-Side SDKs
    • Authentication
    • API Reference
      • Customer
      • Event
      • Transactions
      • Order
      • Coupons
      • Leaderboard 👑
      • Notifications 👑
      • Configurations 👑
      • Batches 👑
        • Batch Operations Data
      • OTP
      • Partner 🤝
        • Client 🤝
        • Redemption Rule 🤝
        • Cashback Rule 🤝
    • Webhooks
      • Notifications Webhook
      • Customer Profile Webhook
    • Errors
    • Object Reference
  • Tutorials
    • Build Custom UI Elements 👑
      • Display Reward Campaign Progress
      • Show VIP Tiers
      • Show Customer Points Balance
      • Build Leaderboards
      • Show Notifications Inbox
      • Adapt UI to Configurations
      • Advanced UI Techniques
        • Increase Sales with Cashback UI Elements
        • Derive Engagement with Rewards Campaigns UI Elements
    • Tracking Customer Events
    • Build your Own Notification System
    • Checkout Integration Example
    • Redemption Integration Options
      • Redeem with coupon system
        • Integrate your coupon system
          • Example using e-commerce platform(WooCommerce)
          • Example using a custom coupon system
        • Build couponing experience
          • Using Gameball widget
          • Build custom experience
            • Showing customers available points
            • Allowing customers to create coupons
            • Apply the discount code to your cart
        • Coupon integration reference
      • Redeem with direct debt
        • Get customers points balance
        • Redeem customer points
  • Third Party Integrations
    • Segment Integration
Powered by GitBook
On this page
  • Widget Modes
  • Guest View
  • Customer View
  • Widget Parameters Description
  • Profile Languages
  1. Installing Gameball
  2. Web

Show Gameball Customer Widget

Get started on integrating the Gameball players's profile into your website or web app

PreviousWebNextTrack Customer Events

Last updated 11 months ago

Gameball widget is a customized loyalty interface your customers see when they are on your platform. The widget is where they can learn more about the loyalty program, track their progress, find their referral URL, and find other loyalty profile information. Learn more about .

To show the Gameball widget on your website or web application, you need to add the widget javascript code snippet to every webpage where you want the widget to appear. Paste the code snippet immediately before the closing tag. If you use templates to dynamically generate pages for your site, like PHP, ASP, or similar technology, you can paste the code snippet into its file, then include it in your page header.

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

Widget Modes

The widget supports two different modes, a guest view, and a customer view. Each can be shown to your website visitors with the same code snippet and serve different use cases.

A guest view is normally what you want your guests (non-logged-in users) to see about the programs you're offering. This can encourage guests to create accounts and sign in to enjoy your rewards programs. Where a customer view is used to let your customers (logged-in users) track their programs in your rewards program and enjoy their benefits.

Guest View

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

Customer View

For customer view, all you need to do is to set the playerUniqueId value to the currently logged-in user. This is how your customer will be identified and tracked at Gameball, hence make sure to send a permanent consistent id across a user’s lifetime. It could be a database ID, random string, email, or anything that uniquely identifies the customer .

In addition to the playerUniqueId, optional player attributes can be sent to enrich the customer's profile at Gameball. You can send non, all, or selected attributes to Gameball depending on how you would like to enrich your customer's profile.

<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            APIKey: '{{Your_API_Key}}',
            lang: 'en',
            playerUniqueId: '{{logged_in_player_unique_id}}',
            playerAttributes: {
                displayName: 'john austin',
                email: 'example@example.com',
                custom:
                {
                    'height': '1.8'
                }
            },
        });
    };
</script>
<script defer src="https://assets.gameball.co/widget/js/gameball-init.min.js"></script>

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 any time.

Widget Parameters Description

Parameter

Type

Required

Description

APIKey

string

Yes

Client API key

lang

string

Yes

Your platform language preference to view Gameball Widget with.

Note: The language provided should be as per configured languages in your account. If not provided the Gameball profile widget will be shown with your account default language

Example: "en", "fr".

playerUniqueId

string

Yes

Unique identifier for the customer in your database.

Could be database ID, random string, email or anything that uniquely identifies the customer.

playerAttributes

object

No

playerAttributes Object

Parameter

Type

Description

displayName

string

Customer's display name

firstName

string

Customer's first name

lastName

string

Customer's last name

gender

string

Customer's gender. Example: M or F, Male or Female.

email

string

Customer's email

dateOfBirth

string

Customer's date of birth

Example: "1980-09-19T00:00:00.000Z"

joinDate

string

Customer join date at your system.

Example: "2019-09-19T21:06:29.158Z"

tags

string

Comma separated string of tags to be attached to the customer.

Example: "VIP,Platinum"

community

string

Describe which community a customer belongs to.

Example: ?

custom

object

Key value pairs of any extra customer attributes.

{"class" : "E2022", "weight" : 78}

Profile Languages

For websites with multiple languages, how you can change Gameball widget language based on active website language. Gameball supports multiple languages for the customer profile widget. The widget language can be changed based on your customer's active language on the website.

Supported Languages & Codes

Language

Code

Arabic

ar

Dutch

nl

English

en

French

fr

German or Deutsch

de

Hungarian

hu

Italian

it

Portuguese

pt

Spanish

es

Swedish

sv

Taiwanese Mandarin

zh-TW

In order to show the correct language of the widget based on the active language on the website, you just need to use the language code inside the lang variable in the code snippet.

For guest customers, and non-logged-in users, use the below snippet to add your Gameball APIKey. Please check the article to learn more on how to get your unique APIKey.

Every time the widget is initialized with customer data, the customer profile is created or updated on Gameball side. You may consider enriching your Gameball's customer profile with attributes that are not available to the UI by using the server-side

An with set of properties that you want to set for the customer.

Learn how you can configure the languages on your Gameball account through this .

Gameball widget
How can you get your account integration details? (API Key & Transaction Key)
article
object
Create\Update Customer API