Gameball Webview Guide

This guide is a high level walkthrough on how to integrate Gameball with any mobile development framework that supports in-app Webviews for example flutter, ionic.

1. Show Player's Gameball Profile

2. Notifications

3. Referral

This guide is not framework specific. Below is general high level guideline illustrating how to integrate Gameball with applicable mobile frameworks

Show Player's Gameball Profile

Before we start, lets illustrate the proposed sequence to show Gameball profile

1. Add menu item to your APP menu or player's profile page

2. Upon click open Webview that points to a webpage with Gameball installed

3. Pass player's data to Webview

The first step is to create a blank HTML page and host it at your desirable domain path as below

https://yourdomain.com/webview-address/index.html

This created empty page will be responsible to load Gameball widget for your mobile user.

On page header include Gameball widget loading script as described in Install Gameball Profile section

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

For mobile app case, a new paramter must exist in the loading script

mobile:true

So the loading script would be as below

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

How to pass data to your webview

In order to pass player's data from your APP to webview\Gameball widget, there are two options depending on your framework capabilties.

If the used framework supports passing params\variables to Webview you can pass logged in user profile data directly to the Webview and inject them to Gameball widget loading script.

The other option is to pass players data to Gameball loading script via query strings while loading Webview like

https://yourdomain.com/webview-address?playerUniqueId={{playerUniqueId}}&displayName={{displayName}}

and the loading script will look like below

<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: {{playerUniqueId}},
            mobile:true,
            playerAttributes: {
                displayName: {{displayName}}
            },
            lang: 'en',
            APIKey: '8fxxxxxxxxxxxxxxx'
        });
    };
</script>

Notifications

Gameball webhooks can be used to avail push notifications for mobile users. This can be done by webhook subscriptions to receive notifications for particular events in Gameball. After you have subscribed to a webhook, your app can execute a specific code immediately after specific events occur in Gameball. Common webhook use cases include sending notifications to IM clients and pagers.

Referrals

Before you start, you must configure your Firebase on your Gameball account. Follow the steps in Configure your Firebase account on Gameball for mobile friends referral links article in our Help Center to configure your Firebase account on Gameball.

Configure your app to be able to receive and process the Firebase Deep Links