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
  • Quickstart Guide
  • Install the SDK package using NPM
  • Installation
  • Getting gluToken and userId from Postman
  • Usage
  • Here’s a basic example of how to use the component in your project:

Was this helpful?

Quickstart Guide for 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.

PreviousGetting startedNextQuickstart Guide for React Native Apps

Last updated 9 months ago

Was this helpful?

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 .

  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>"
          region="<REGION>"
        >
          // <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.Also, add the relevant region.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.

πŸ”§
here