Web SDK
Launch CustomerGlu games, challenges, rewards and nudges on web applications/websites within minutes...
Installation
Paste the given snippet in your website’s HTML file just before closing the body (</body>
) tag.
<script type="text/javascript">
window["gluConfig"] = {
writeKey: "{{WRITE_KEY}}", //provided by CustomerGlu
userIdentification: {
userId: "{{USER_ID}}",
anonymousId: "{{ANONYMOUS_ID}}",
userToken: "TOKEN" //using this will make writeKey optional
},
userAttributes: {
gluAttributes: {}, //add CG reserved user properties here (key-value pair)
customAttributes: {} //add all your custom user properties here (key-value pair)
},
onLoadError: function () { //error handling function if SDK fails to load
console.log("error");
}
};
</script>
<script type="text/javascript">
(()=>{"use strict";!function(){const e=window.gluConfig||{},t=[],o={open:{returnPromise:!0,callMethod:"open"},close:{returnPromise:!1,callMethod:"close"},register:{returnPromise:!1,callMethod:"register"},listenToAnalytics:{returnPromise:!1,callMethod:"listenToAnalytics"},getCampaignDetails:{returnPromise:!0,callMethod:"getCampaignDetails"}},r=["open","close","register","listenToAnalytics","getCampaignDetails"],n={};for(let e=0;e<r.length;e++)n[r[e]]=function(){const n=o[r[e]],s=Array.prototype.slice.call(arguments);if(n.returnPromise)return new Promise(((e,o)=>{t.push({callMethod:n.callMethod,arguments:s.concat({resolve:e,reject:o}),isPromise:!0})}));t.push({callMethod:n.callMethod,arguments:s})};let s=document.createElement("script");s.type="text/javascript",s.async=!0,s.src="https://assets.customerglu.com/scripts/sdk/v4.6/sdk.js",s.onload=function(){const o=new window.CustomerGlu(e.writeKey,e.userIdentification,e.userAttributes);for(let e=0;e<t.length;e++)o[t[e].callMethod](...t[e].arguments);window.glu=o},s.onerror=function(){if(t&&t.length){for(let e=0;e<t.length;e++)t[e].isPromise&&t[e].arguments[t[e].arguments.length-1]("GLU_SDK_LOAD_ERROR");e.onLoadError&&e.onLoadError()}},document.getElementsByTagName("body")[0].appendChild(s),window.glu=n}()})();
</script>
Replace the variables with correct values.
You are now ready to load CustomerGlu UI on your website. You can now use:
The Nudges section on the dashboard to add dynamic entrypoints like floating launchers, popups, banners, etc.
The subsequent SDK Functionality to programmatically load campaigns.
Functionality
On pasting the above script, a global instance glu
will be available in the window.
The glu
instance supports the given methods:
Register User
Use the given method to register a user with CustomerGlu:
glu.register(writeKey: string, userIdentification: IUserIdentification, userAttributes: IUserAttributes);
⚠️ writeKey
is a string that will be provided by CustomerGlu.
UserIdentification
follows the given structure:
interface IUserIdentification {
userId?: string;
anonymousId?: string;
}
If the user is not logged in the platform,
userId
can be null, andanonymousId
can be passed (an anonympusId will be auto-assigned if not passed explicitly). User progress/state of the campaigns will be linked to the anonymousIdAfter the user logs in, the same
anonymousId
and theuserId
can be passed. And progress linked toanonymousId
will be linked with theuserId
. If user is already logged in, userId can be passed directly.
⚠️ At least one function call with both - anonymousId and userId is required to map the anonymousId to the userId after the user logs in.
UserAttributes
are used for segmentation. They follow the given structure:
interface IUserAttributes {
gluAttributes?: {
userName?: string;
appVersion?: string;
deviceType?: string;
deviceName?: string;
deviceId?: string;
firebaseToken?: string;
};
customAttributes?: {
[key: string]: string | number;
};
}
customAttributes
can hold any extra key-value pair that might be used for user segmentation/other purposes. Example: {"location":"Mumbai""}
Open
The given function can be used to render CustomerGlu UI fragments on the screen:
glu.open(container: IContainer, content: IContent): Promise<string>
⚠️ It returns the promise of a string, that can be used to close the UI using glu.close
method.
Function parameters:
Containers
container
holds the container details. i.e. If the UI is a bottom sheet, pop up or be embedded etc.The styling of the container can be customised using the
css
property present in each container type. The container elements are targeted using special class names.Different containers can have same class names for styling, but the styles gets scoped to only the targeted container.
Media queries and your custom CSS variables can also be used inside the string.
All supported container
types are listed down below:

Code
/* interface */
interface IPopUp {
typeId: "POP_UP";
css: string;
}
/* example */
const container: IPopUp = {
typeId: "POP_UP",
css: `
.__glu_container {
border-radius: 10px;
background-color: #000;
cursor: pointer;
}
.__glu_backdrop {
background-color: #000;
opacity: 0.5;
}
@media screen and (max-width: 700px) {
.__glu_container {
height: 400px;
width: 40p0x;
}
}`
}
Sandbox
Content
content
holds details regarding what gets rendered inside the container
.
All supported content
types are listed down below:
Close
The glu.open
method returns a unique string. Following method can be used to close the frame:
glu.close(id: string);
Function parameters:
id: unique string returned by glu.open
method
Get Campaign Details
glu.getCampaignDetails
can be used to get the campaign details. The result include the campaign details and the array of rewards earned for that campaign.
glu.getCampaignDetails(filter: IFilter, config: IConfig): Promise<ICampaignDetailsResult>
It accepts 2 arguments:
filter
andconfig
filter
helps in identifying the campaign for which the details are needed.config
has configurations like: should the reward details also exist with the details of the campaign.
/* filter interface */
interface ICampaingDetailsFilter {
campaignId?: (string | boolean | number)[] | string;
[key: string]: (string | boolean | number)[] | string;
}
/* config interface */
interface ICampaingDetailsConfig {
includeRewards: boolean;
}
/* RESULT interface */
interface ICampaignDetailsResult {
details: {
campaignId: string;
status: "pristine" | "completed";
type: string;
url: string;
banner?: any;
};
rewards?: {
game_name?:
| "spinthewheel"
| "memorygame"
| "scratchcard"
| "slotmachine"
| "quiz"
| "direct"
| "giftbox"
| "not_available"
| "swipeui"
| "tossthecoin"
| "unitygame"
| "rollthedice";
state?: "pristine" | "complete" | "expired" | "not_available";
campaign_id?: string;
reward_user_id?: string;
user_id?: string;
status?: string;
selected_slot_index?: number | "not_available";
reward_name?: string;
reward_type?: string;
code?: string;
reward_amount?: string | number;
details?: { [key: string]: string } | "not_available";
}[];
}
/* example */
glu
.getCampaignDetails(
{ campaignId: "f8cca67-596e-4b28-a173-8a018cdb2cf8" },
{ includeRewards: true }
)
.then((res) => {
document.querySelector("#app").textContent = JSON.stringify(res);
}).catch(err => console.log(err));
Listen to Analytics
You can listen to the analytics events triggered from the glu ui by registering a callback with the SDK’s addAnalyticsListener
method.
glu.addAnalyticsListener(listener: (analyticsEvent: any) => void)
glu.addAnalyticsListener
accepts a callback function as an argument. & whenever an analytics event is triggered, it is passed on to the callback as the first argument.Schema can be found here:https://docs.customerglu.com/schema/analytics-schema-v4
Last updated
Was this helpful?