CustomerGlu Developer Documentation
  • 🔧Getting started
  • 🔧Quickstart Guide for React Web Apps
  • 📱Quickstart Guide for React Native Apps
  • 📱Quickstart Guide for Flutter Apps
  • Integrating with SDKs
    • Web SDK
    • Mobile SDKs
      • How to Test Integration?
    • Cordova SDK
    • Shopify
  • Integrating with APIs
    • Register User/Device
    • Load Campaigns
    • Binding Webview to Native App Functions
    • 🔍Using __GLU_NUDGE_CLICK for Widget Visibility
    • 🎯API-based Segmentation Quickstart Guide
  • 🔌Third-Party Integrations
    • Source
      • Sending Events directly from Server
      • Segment
      • Moengage
      • Amplitude
      • Clevertap
      • Webengage
    • Destination
      • Analytics Webhook
      • Customer.io
      • Talon.One
      • Segment
      • MoEngage
      • Amplitude
      • Clevertap
      • WebEngage
      • Google Sheets
    • Cohort
      • Mixpanel
  • Miscellaneous Topics
    • Direct Campaign/Wallet URLs
    • Configuring Webhooks
      • Rewards Webhook
      • Nudge Webhook
    • Notifications
      • FCM
      • APNs
      • CustomerGlu Notification
      • Testing Nudges
    • Referral Campaigns
      • Firebase
      • Branch
    • Handling Non Logged-in Users
    • Testing Campaigns with User Logs
    • Using the Editor
      • How to edit Buttons in Campaigns
    • How to Create and Manage Segments in CustomerGlu
  • SCHEMA REPOSITORY
    • Webhook Schema
      • Reward Webhook Schema
      • Nudge Webhook Schema
      • Raw Event Webhook Schema
    • Webview Callback Schema
      • Analytics Event Schema
    • Analytics schema V4
      • Page Events
      • Track Events (UI)
      • Track Events (SDK)
      • State-Change Events
      • System Events
    • 🗝️FAQ
      • API Key
      • How to find and add Screen Names for Entrypoints
  • Demo Apps
    • Demo Apps
Powered by GitBook
On this page
  • Installation
  • Functionality
  • Register User
  • Open
  • Containers
  • Content
  • Close
  • Get Campaign Details
  • Listen to Analytics

Was this helpful?

  1. Integrating with SDKs

Web SDK

Launch CustomerGlu games, challenges, rewards and nudges on web applications/websites within minutes...

PreviousIntegrating with SDKsNextMobile SDKs

Last updated 1 year ago

Was this helpful?

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);

UserIdentification follows the given structure:

interface IUserIdentification {
  userId?: string;
  anonymousId?: string;
}
  • 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:

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>

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

Code

/* interface */
interface IBottomSheet {
  typeId: "BOTTOM_SHEET";
  css: string;
  height: string;         // <- in px or % 
}

/* example */
const container: IBottomSheet = {
  typeId: "BOTTOM_SHEET",
  height: "60%",
  css: `
    .__glu_container {
        border-top-left-radius: 20px;
        border-top-right-radius: 5px;
        background-color: #fff;
    }
    .__glu_backdrop {
	background-color: #000;
          opacity: 0.5;
    }`
}

Sandbox

Code

/* interface */
interface IIconButton {
  typeId: "ICON_BUTTON";
  css: string;
}

/* example */
const container: IIconButton = {
  typeId: "ICON_BUTTON",
  css: `
    .__glu_container {
	border-radius: 50%;
        background-color: #000;
        cursor: pointer;
    }
    @media screen and (max-width: 450px) {
      .__glu_container {
          height: 40px;
          width: 40px;
      }
    }`
}

Code

/* interface */
interface IChatBox {
  typeId: "CHAT_BOX";
  css: string;
}

/* example */
const container: IChatBox = {
  typeId: "CHAT_BOX",
  css: `
    .__glu_container {
        border-radius: 12px;
        background-color: #000;
        cursor: pointer;
    }
    @media screen and (max-width: 450px) {
        .__glu_container {
            height: 100vh;
            width: 100vw;
          }
    }`
}

Sandbox

Code

/* interface */
interface IEmbedded {
  typeId: "EMBEDDED";
  css: string;
  elementHookId: string;  // <- HTML elelemt selector (eg: .class, #id, main, body)
}

/* example */
const embedded: IEmbedded = {
  typeId: "EMBEDDED",
  elementHookId: "#app",
  css: `
      .__glu_container {
          width: 500px;
          margin: 0 auto;
          height: 1000px;
          overflow: scroll;
        }`
}

Sandbox

Content

All supported content types are listed down below:

Code

/* interface */
interface IWallet {
  typeId: "WALLET";
}

/* example */
const content: IWallet = {
  typeId: string
}

Sandbox

Code

/* interface */
interface ICampaign {
  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 */
const content: 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 */
const content: 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 */
interface IStaticImage {
  typeId: "STATIC";
  src: string;
  action: IAction; // <- on click action
}

/* example #1: on click redirect */
const content: 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 */
const content: 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 */
const content: 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

glu.close(id: string);

Function parameters:

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 and config

    • 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.

writeKey is a string that will be provided by CustomerGlu.

At least one function call with both - anonymousId and userId is required to map the anonymousId to the userId after the user logs in.

It returns the promise of a string, that can be used to close the UI using method.

elementHookId should be a valid html selector or element on the page. The glu container will be appended inside the that element

content holds details regarding what gets rendered inside the .

The method returns a unique string. Following method can be used to close the frame:

id: unique string returned by method

Schema can be found here:

⚠️
⚠️
⚠️
https://docs.customerglu.com/schema/analytics-schema-v4
⚠️
glu.close
Container
Content
container
glu.open
glu.open