Web SDK Doc

Web SDK Start Guide

Gamize provides a JavaScript library to add Gamifications on your website. This section shows how to set up a Gamize JavaScript library on your website.

Add the Gamize JavaScript Library to Your Website

To get started, use the following steps:

  1. Copy and paste the code snippet below inside the section of your website.
  2. Replace GAMIZE_API_KEY with your GamIZE API Key. You can find your GamIZE API Key on the Profile Section.
<script src="https://storage.googleapis.com/ec2-us-east-1-1b-gamify-js-storage-ca-d2c/gamIZE.min.js?key=GAMIZE_API_KEY"></script>
  1. Create Gamize Object
let gamize = new Gamize();
  1. Set User's unique identifier to the variable identifier
gamize.identifier = <IDENTIFIER>;

Integrate Activities to existing DIV

To render a Static div in the website need to call the following function by passing the Rule name created in Gamize Admin Portal

gamize.isTemplateExistsByRuleName('<RULE_NAME>');

This method will return boolean. If the Rule is active and all the conditions are satisfied then true will be returned else false will be returned. Based on the response value any div in the website can be shown or hidden.

Once div is rendered to get Gamification activity call the following function on onClick event of div tag

gamize.loadTemplateByRuleName('<RULE_NAME>');

After onclick event, Gamification Activity associated with the rule will be rendered as pop up window

Event Triggered Activities

To render an activity when a user does a particular event use the following method

gamize.loadTemplateByEvent('<EVENT>', {<PROPERTIES>});

This method needs to pass the event and its properties. For example, need to render activity once the user does a login from a web application then the event is login and the device will be web

gamize.loadTemplateByEvent('login', {"device":"web"});

Here you can pass any number of properties but it should be in JSON format. Trigger events should be created in Rule Engine Screen while creating a rule in Gamize Portal. Once the Trigger Event matches the event passed in the method, the respective activity will be rendered.

Redeem Voucher

To redeem the Voucher use the following method. This method is used to redeem only Vouchers

gamize.redeemVoucher(<VOUCHER_CODE>);

once the Voucher is redeemed successfully response will be like

{"message" :  "Reward Redeemed Successfully"}

if the voucher is already redeemed, in response following error message returned

{"errorCode":"GM-01-105","errorMessage":"Voucher is already used"}

if the voucher is not found, in response following error message returned

{"errorCode":"GM-01-103","errorMessage":"Voucher is Not Valid or found"}

Integrate Activities without Rule Name

Activities can be integrated without using the Rule Name by calling following method

gamize.loadTemplate();

Any Rule that is active at the time of the method call will be executed and the corresponding Activity will be rendered.

Note: if Multiple rules matches the latest Updated Rule will be executed.

Game Leader Board

If the Game is an activity and the Rule is set as Score based, Then we need to render the Leaderboard. Once the user closes the game window.

gamize.getGameLeaderBoard(<RULE_ID>);

By passing RULE ID, which will be available in the response of loadTemplate, loadTemplateByEvent, loadTemplateByRuleName methods. Following will be the response of the getGameLeaderBoard API

{
    "leaderBoardList": [
        {
            "id": null,
            "createdOn": 0,
            "subId": "628af48c3eb5b6000199026f",
            "country": null,
            "gamestate": null,
            "sessionId": null,
            "score": 21,
            "gameCode": "B1fSpMkP51m",
            "ruleId": "6288712a3eb5b60001aa16eb",
            "identifier": "Akshay",
            "orgId": 76,
            "count": 6,
            "rank": 1,
            "currentUserFlag": false,
            "withinRankLimit": false
        },
        {
            "id": null,
            "createdOn": 0,
            "subId": "628898a73eb5b6000198fe07",
            "country": null,
            "gamestate": null,
            "sessionId": null,
            "score": 20,
            "gameCode": "B1fSpMkP51m",
            "ruleId": "6288712a3eb5b60001aa16eb",
            "identifier": "azad",
            "orgId": 76,
            "count": 2,
            "rank": 2,
            "currentUserFlag": true,
            "withinRankLimit": false
        }, "reward": null,
    "leaderBoard": true
}

In the response, there is a field called currentUserFlag if it is true then that Object belongs to the Current user who played the game.

Modal Close Event

There is a callback event for the Activity modal close, Which can be used to trigger some functions once modal is closed.

new Gamize({
         onCloseModal: onCloseModalEvent;
});

function onCloseModalEvent() {
      alert("Event called");
}