🔧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

Installation

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:

You can install the package using npm or yarn:

npm install @customerglu/react-web-sdk

Getting gluToken and userId from Postman

You will need a gluToken and userId to interact with our React Component. Follow these steps to get them using Postman:

1. Fork the Postman Collection.

2. Get CustomerGlu writeKey from here.

3. Use Register the User request to get the userId and gluToken

   • Fill in the relevant userId and writeKey in the request body.

   • After sending the request you'll receive a token as gluToken in the response body.

Note: Any relevant UserId can be provided.

Usage

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={{
          width: "100vw",
          cursor: "pointer",
        }}
      >
        <CustomerGluComponent
          userId="<YOUR-USER-ID>"
          gluToken="<USER-GLU_TOKEN>"
        >
          // <Loader /> you can render your loading component
        <CustomerGluComponent />
      </div>
    </div>
  );
}

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

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

Please replace the gluToken and userId obtained by Register the User, in the CodeSandbox, a test gluToken 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.