Install Gameball Profile

In this article, you will find all the needed information on how to integrate Gameball Widget to your website. This includes the code snippet to be used in addition to all parameters definition.

Gameball Widget Code Snippet

In order to show Gameball profile widget, add the below 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 own file, then include it in your page header.

Guest View vs User View

The main difference between guest view versus user view is the amount of information you have about them. You will definitely have more info on logged in users. However, guest activity can still be captured by Gameball when this feature is enabled, then used later through Gameball engagement features once they sign-up or sign-in. In addition to this, Gameball widget will look differently for guests.

Guest View

For guest customers, not logged in users, use the below snippet adding 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({
            lang: 'en',
            APIKey: '8fxxxxxxxxxxxxxxx'
        });
    };
</script>
<script defer src="https://assets.gameball.co/widget/js/gameball-init.min.js"></script>

User View

In case your customer is now logged in and is becoming a Gameball Player, use the below snippet:

Users in the Gameball sense are called Players.

<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: 'id123',
            playerAttributes: {
                displayName: 'john austin',
                email: '[e-mail]',
                dateOfBirth: '2000-1-1',
                gender: 'M',
                custom:
                {
                    'city': 'ny',
                    'height': '1.8'
                }
            },
            lang: 'en',
            APIKey: '8fxxxxxxxxxxxxxxx'
        });
    };
</script>
<script defer src="https://assets.gameball.co/widget/js/gameball-init.min.js"></script>

Please note that you must provide a unique ID for each of your users. This unique ID should be added to the playerUniqueId parameter.

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 email address or mobile number as the unique ID as both can be changed by the user at anytime.

Example:

<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: 'id123',
            playerAttributes: {
                displayName: 'john austin',
                email: '[e-mail]',
                dateOfBirth: '2000-1-1',
                gender: 'M',
                community: 'github'
                custom:
                {
                    'city': 'ny',
                    'height': '1.8'
                }
            },
            lang: 'en',
            APIKey: '8fxxxxxxxxxxxxxxx'
        });
    };
</script>
<script defer src="https://assets.gameball.co/widget/js/gameball-init.min.js"></script>

Parameters Description:

Parameter	Required	Description	Type
APIKey	Required	Your Gameball unique client API Key How to get your Gameball account API Key	String
lang	Required	Your platform language preference to view Gameball Widget with. If not provided, Gameball app will appear in English.	String
playerUniqueId	Required	Player external ID used by integrator to uniquely identify the player in Gameball	String
playerTypeId	Optional	Player type ID as defined through Gameball dashboard	Integer
playerAttributes	Optional	PlayerAttributes is a builder class which is used to add or update your player info to Gameball. Player object is described in Object Reference section.	Object

Now, you can move ahead to learn more on how to integrate Gameball with your mobile app.