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:
- Copy and paste the code snippet below inside the section of your website.
- 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>
- Create Gamize Object
let gamize = new Gamize();
- 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");
}