Paste the given snippet in your website’s HTML file just before closing the body (</body> ) tag.
<scripttype="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 loadconsole.log("error"); } };</script><scripttype="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:
If the user is not logged in the platform, userId can be null, and anonymousId can be passed (an anonympusId will be auto-assigned if not passed explicitly). User progress/state of the campaigns will be linked to the anonymousId
After the user logs in, the same anonymousId and the userId can be passed. And progress linked to anonymousId will be linked with the userId. If user is already logged in, userId can be passed directly.
UserAttributes are used for segmentation. They follow the given structure:
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:
content holds details regarding what gets rendered inside the container.
All supported content types are listed down below:
Code
/* interface */interfaceIWallet { typeId:"WALLET";}/* example */constcontent:IWallet= { typeId: string}
Sandbox
Code
/* interface */interfaceICampaign { typeId:"CAMPAIGN"; conditions: { campaignId?:string[]; type?: "referral" | "gamechallenge" | "streak" | "multistep" | "spinthewheel" | "scratchcard" | "slotmachine" | "giftbox" | "tossthecoin" | "memorygame" | "catchinggame" | "quiz" | "direct" [];
status?:"pristine"|"in-progress"|"completed" []; };}/* example #1: select a single campaign */constcontent:ICampaign= { typeId:"CAMPAIGN", conditions: { campaignId: ["asd283mkla-3890njakd-jkandsk3-kjadnjk3"] }}/* example #2: select a scratch card if present else a spin the wheel campaign if present */constcontent:ICampaign= { typeId:"CAMPAIGN", conditions: { type: ["scratchcard","spinthewheel"] }}
conditions property inside the ICampaign is in key-value pair format. Key is the property that needs to be filtered for. Value is an array of acceptable set of values.
The first campaign that satisfies all the conditions is selected.
If the campaign is not found, an error CAMPAIGN_NOT_FOUND is thrown.
Sandbox
Code
/* interface */interfaceIStaticImage { typeId:"STATIC"; src:string; action:IAction; // <- on click action}/* example #1: on click redirect */constcontent:IStaticImage= { typeId:"STATIC", src:"https://uploads-ssl.webflow.com/60ae16f0e20bce50d40c3c7e/61efce5c2ab738e60fd0856f_Group%2027.png", action: { type:"REDIRECT", data: { url:"https://website.com/rewards" } }}/* example #2: on click open wallet in a pop up */constcontent:IStaticImage= { typeId:"STATIC", src:"https://uploads-ssl.webflow.com/60ae16f0e20bce50d40c3c7e/61efce5c2ab738e60fd0856f_Group%2027.png", action: { type:"TOGGLE_FRAME_CONTENT"; id: string; container: { typeId:"POP_UP", css:` .__glu_container { border-radius: 10px; background-color: #000; cursor: pointer; } `}, content: { typeId:"WALLET" } }}/* example #3: on click open a campaign in a bottom sheet */constcontent:IStaticImage= { typeId:"STATIC", src:"https://uploads-ssl.webflow.com/60ae16f0e20bce50d40c3c7e/61efce5c2ab738e60fd0856f_Group%2027.png", action: { type:"TOGGLE_FRAME_CONTENT"; id: string; container: { typeId:"BOTTOM_SHEET", css:` .__glu_container { border-radius: 10px; background-color: #000; cursor: pointer; } `}, content: { typeId:"CAMPAIGN", conditions: { campaignId: ["asd283mkla-3890njakd-jkandsk3-kjadnjk3"] } } }}
Close
The glu.open method returns a unique string. Following method can be used to close the frame:
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.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.