In-App Webview Usage for Mobile Apps

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, etc...
1.​Show Player's Gameball Profile​
2.​Notifications​
3.​Referral​
This guide is not framework specific. Below is a 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 self-hosted 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: '{{playerUniqueId}}',
            lang: 'en',
            playerAttributes:{},
            APIKey: '{{Your_API_Key}}'
        });
    };
</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: '{{playerUniqueId}}',
            lang: 'en',
            playerAttributes:{},
            APIKey: '{{Your_API_Key}}',
            mobile:true
        });
    };
</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's 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 similar to the below:
<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: {{playerUniqueId}},
            mobile:true,
            playerAttributes: {
                displayName: {{displayName}}
            },
            lang: 'en',
            APIKey: '{{Your_API_Key}}'
        });
    };
</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.
​
​
Last modified 1yr ago