Show Gameball Player Widget

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

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 Gameball widget.

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 player 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 player view is used to let your players (logged-in users) track their programs in your rewards program and enjoy their benefits.

Guest View

For guest customers, and non-logged-in users, use the below snippet to add your Gameball APIKey. Please check the article How can you get your account integration details? (API Key & Transaction Key) to learn more on how to get your unique APIKey.

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

Player View

For player view, all you need to do is to set the playerUniqueId value to the currently logged-in user. This is how your player 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 player.

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

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

<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            APIKey: '{{Your_API_Key}}',
            lang: 'en',
            playerUniqueId: '{{logged_in_player_unique_id}}',
            playerAttributes: {
                displayName: 'john austin',
                email: '[e-mail]',
                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 player, you risk losing all original data for that player 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 player in your database. Could be database ID, random string, email or anything that uniquely identifies the player.
playerAttributes	object	No	An object with set of properties that you want to set for the player.

playerAttributes Object

Parameter	Type	Description
displayName	string	Player's display name
firstName	string	Player's first name
lastName	string	Player's last name
gender	string	Player's gender. Example: M or F, Male or Female.
email	string	Player's email
dateOfBirth	string	Player's date of birth Example: "1980-09-19T00:00:00.000Z"
joinDate	string	Player join date at your system. Example: "2019-09-19T21:06:29.158Z"
tags	string	Comma separated string of tags to be attached to the player. Example: "VIP,Platinum"
community	string	Describe which community a player belongs to. Example: ?
custom	object	Key value pairs of any extra player 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 player profile widget. The widget language can be changed based on your player's (customer) active language on the website.

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

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.