@customerglu/react-web-sdk

CustomerGlu enables growth teams to run gamified programs in minutes, using a low code builder. This package is the SDK for React Web apps.

Table of Contents

• Installation
• Usage
• Props
• Contributing
• License

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"
        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>"
          region="<REGION>"
        >
          <Loader /> // you can render your loading component
        <CustomerGluComponent />
      </div>
    </div>
  );
}

Note: id of the div is configured from the CustomerGlu dashboard while creating the nudge for the particular campaign.

Props

| Prop Name | Type | Default | Description | | ---------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | userId | string | '' | This field is used to provide a user identifier whenever user logs in, in the app flow. This field is not mandatory, and SDK would assign an anonymous ID in case userId is not provided. | | gluToken | string | | (Required) This can be generated by the API provided by CustomerGlu. | | children | node | | A loader component that is displayed while the SDK is being initialized. | | region | string | 'in' | The datacenter location for your CustomerGlu account. We support 2 datacenter locations: 'in' or 'us' |

Enable Activity Processing

For enabling the Activity Processing for the user we need to enable it from the following method:

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

gluEnableActivityProcessing("<USER-GLU_TOKEN>", "<CAMPAIGN_ID>");

Function Arguments

| Argument Name | Type | Default | Description | | ---------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------- | | USER-GLU_TOKEN | string | '' | (Required) This can be generated by the API provided by CustomerGlu | | CAMPAIGN_ID | string | '' | (Required) CampaignId can be obtained from the dashboard for the campaign where you want to enable activity processing.. |

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

Development

To get started with development, clone the repository and install dependencies:

git clone https://github.com/customerglu/customerglu-components.git
cd customerglu-components
npm install

Changelog

Version 1.5.4

• Remove addition checks

Version 1.5.1

• Added fix for Singleton instance

Version 1.5.0

• Improved resource management for better performance and efficiency.

License

This project is licensed under the MIT License. See the LICENSE file for details.