πŸ”§React Web Apps

CustomerGlu enables growth teams to run gamified programs in minutes using a low-code builder. This guide will help you integrate the CustomerGlu React SDK into your web application.

Quickstart Guide

This Quickstart Guide will walk you through integrating CustomerGlu's React web SDK in a sandbox environment and launching a few campaigns.

Install the SDK package using NPM

Start by cloning our pre-configured CodeSandbox template for React Web:

Or if you wish to set up your existing React project with CustomerGlu React SDK, you can install the latest package from npm and import it into your project as follows:

Installation

You can install the package using npm or yarn:

npm install @customerglu/react-web-sdk

Usage

Here’s a basic example of how to use the component in your project:

import { CustomerGluComponent } from "@customerglu/react-web-sdk";

export default function App() {
  return (
    <div className="App">
      <div
        id="embedId" // this Id we can setup from dashboard
        style={{
          margin: "10px",
          border: "1px solid #E2E8F0",
          borderRadius: "8px",
          height: "fit-content",
          width: "380px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          cursor: "pointer",
        }}
      >
        <CustomerGluComponent
          userId="<YOUR-USER-ID>"
          gluToken="<USER-GLU_TOKEN>"
        >
          // <Loader /> you can render your loading component
        <CustomerGluComponent />
      </div>
    </div>
  );
}

Please replace the writeKey and userId as appropriate or provided by your Technical Onboarding Manager, in the Codesandbox, a test writeKey and userId with a relevant campaign have already been provided.

To complete activities for the user, you can use CustomerGlu Debugger from the CustomerGlu Dashboard or you can also use the following API call via Postman:

curl --location 'https://events.customerglu.com/server/v4' \
--header 'Content-Type: application/json' \
--header 'X-API-KEY: <YOUR-WRITE-KEY>' \
--data '{
   "user_id":"<YOUR-USER-ID>",
   "event_name":"<YOUR-EVENT-NAME>",
    "event_properties":{
       "<KEY-1>": <VALUE-1>
   }
}'

Upon refresh, you should see the relevant banner or campaign being rendered in the app.

If you face any issues in the above setup, please contact us via the support channel.

Last updated