Integration Guides
Integrating Xtralife (Storage Service, User Service, Leaderboards Service, Messaging Service, Referral Service)
The default back-end used by IGX is Xtralife, you will need to create a free account and add a game to obtain an API key and secret to use the API. Once you have an account and have added a game to the system you will be given an API key and secret which you can use to access back-end features.
To set up Xtralife up in code use:
FBInstant.options.apiKey = "Your games Xtralife key";
FBInstant.options.apiSecret = "Your games Xtralife secret";
FBInstant.options.devMode = "sandbox";
FBInstant.createDefaultServices("xtralife"); // Use Xtralife back-end by default
Its worth noting that you should not mix sandbox and production environments. Creating a user in the production environment after creating the user in the sandbox on the same domain in the same browser will cause conflicts. If you switch between sandbox and production on the same domain with the same browser then you should clear the gamerData located in local storage.
Integrating Kongregate (User Service, Analytics Service, Payments Service, Share Service, Chat Service)
In order to use Kongregate you must first create an account with Kongregate. Once you have a developer account you will be able to add and upload games to Kongregate and preview them before launching.
To begin integration of Kongregate add the following script to you index file:
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
To set up Kongregate up in code use:
new GameService("kongregate");
new UserService("kongregate");
new AnalyticsService("kongregate");
new PaymentsService("kongregate");
new ShareService("kongregate");
new ChatService("kongregate");
Or you can use the utility function:
FBInstant.createDefaultServices("kongregate");
Integrating SWAG ( Storage Service, User Service, Leaderboards Service and limited Analytics Service)
In order to use SWAG you must firstly contact Addicting games as they will need to provide you with access ot their API hwere
To begin integration of SWAG add the following script to you index file:
<script src='path provided by SWAG to SWAP API goes here'></script>
They may also provide a CSS that you will need to add.
Wrap your canvas inside a wrapper div called b5wrapper or whatever name you want to assign to the div.
To set up swag up in code use:
FBInstant.options.apiKey = 'API key provided by SWAG';
FBInstant.options.container = document.getElementById('b5wrapper');
FBInstant.options.devMode = "debug"; // or release
FBInstant.createDefaultServices("swag");
Additional info regarding leaderboards, getLeaderboardAsync() accepts a second property called options which supplies the following options:
- period: "weekly", // Time period, can be alltime, daily, weekly, monthly
- type: "standard", // Type, standard or weekly. If weekly then scores for each day of week are returned, otherwise single score
- targetDate: null, // Target start date in format YYYY-MM-DD
- useDaily: "no", // Use score day instead of score post date
- valueFormat: "default", // Score value format, can be default, shortDuration, longDuration, seconds, ms
LeaderboardSetScore() accepts a daily property in the extra meta parameter, passing true will cause the daily score to be set for the supplied date. LeaderboardGetRank() returns a single leaderboard entry with a daily property that contains a list of daily scores.
To integrate Crazy Games, sign up and create a developer account Add the following script to your index.html:
<script src="https://sdk.crazygames.com/crazygames-sdk-v1.js"></script>
Add the following code to set up the ad provider and create it:
FBInstant.options.adsOptions.startedCallback = PauseAudio; // Function that will be called to pause audio during ad playback
FBInstant.options.adsOptions.finishedCallback = ResumeAudio; // Function that will be called to resume audio post ad playback
new AdsService("crazygames"); // Use CrazyGames portal ads
Create a game in the Crazy Games dashboard and upload your game files.
Note that preloading ads is not possible using the Crazy Games SDK so calls to loadAsync() will return successfully. Finally, ensure that you read the Crazy Games guidelines
To integrate Game Distribution, sign up and create a developer account
Create a game in the Game Distribution dashboard and copy the Game ID in the Upload section.
Add the following code to set up the ad provider and create it:
FBInstant.options.adsOptions.appId = "ENTER YOUR GAME ID HERE";
FBInstant.options.adsOptions.startedCallback = PauseAudio; // Function that will be called to pause audio during ad playback
FBInstant.options.adsOptions.finishedCallback = ResumeAudio; // Function that will be called to resume audio post ad playback
new AdsService("gamedistribution"); // Use Game Distribution ads
Note that preloading ads is not possible using the Game Distribution SDK so calls to loadAsync() will return successfully.
To integrate Poki, submit your game via the Poki website
Add the following code to set up the ad provider and create it:
FBInstant.options.adsOptions.startedCallback = PauseAudio; // Function that will be called to pause audio during ad playback
FBInstant.options.adsOptions.finishedCallback = ResumeAudio; // Function that will be called to resume audio post ad playback
new AdsService("poki"); // Use Poki
Note that preloading ads is not possible using Poki so calls to loadAsync() will return successfully.
Add the Poki SDK to your index.html:
<script src='//game-cdn.poki.com/scripts/v2/poki-sdk.js'></script>
To integrate AdInPlay, sign up and get approval.
Once you are approved you will be sent a custom URL that you should include in your index.html. You will also need to add a div after your canvas into your index.html called preroll that will contain the advert:
<div id="preroll"></div>
Add the following code to set up the ad provider and create it:
FBInstant.options.adsOptions.adWidth = 960; // The width of the ad holder (default is 960)
FBInstant.options.adsOptions.adHeight = 540; // The height of the ad holder (default is 540)
FBInstant.options.adsOptions.startedCallback = PauseAudio; // Function that will be called to pause audio during ad playback
FBInstant.options.adsOptions.finishedCallback = ResumeAudio; // Function that will be called to resume audio post ad playback
new AdsService("adinplay"); // Use AdInPlay ads
Note that preloading ads is not possible using AdInPlay SDK so calls to loadAsync() will return successfully.
To integrate Google Analytics, sign up and create a Google Analytics account then go to the Admin section of Google Analytics and create a property for your game. You will be given a trackingId.
In code, after you create the Game Service, create the analytics service like this:
FBInstant.options.analyticsOptions.trackingId = "PUT YOUR GOOGLE ANALYTICS TRACKING ID HERE";
new AnalyticsService("google"); // Use Google Analytics
You can view the events sent from your game in the Events section in Google Analytics.
To integrate PayPal Checkout you will need to begin by creating an app on PayPal at https://developer.paypal.com/developer/applications/. Once you have an app you will be given a client ID for sandbox and a client ID for production. Whilst testing use the sandbox client ID as this enables you to use sandbox test users for trying out the implementation. Once you have these details you will need to set some information in FBInstant.options.paymentsOptions section, e.g.:
FBInstant.options.paymentsOptions.devMode = "sandbox"; // Set sandbox mode
FBInstant.options.paymentsOptions.sandboxId = "YOUR PAYPAL SANDBOX ID"; // You sandbox client ID
FBInstant.options.paymentsOptions.productionId = "YOUR PRODUCTION CLIENT ID"; // Not needed until you deploy to a production environment
FBInstant.options.paymentsOptions.products["product1"] = new PaymentsService.Product("Product1", "product1", "My first product", "", 10, "USD"); // Add a product called product1 that the user can purchase
In code, after you create the Game Service, create the analytics service like this:
new PaymentsService("paypal");
Add the PayPal Checkout sdk to your index.html:
<script src='https://www.paypalobjects.com/api/checkout.js' data-version-4></script>
Finally you need to add a div after the canvas in your index.html which can host the PayPal button that will be used to make the purchase. By default this div is called
<div id="paypal-button"></div>
For more PayPal options see lib_paypal.js
Unity integration is a little more in-depth as it involves deploying to mobile. You can read the Deploying to Mobile guide.
Help keep this project alive by donating
