# Quickstart Guide for React Web Apps

## 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

[![npm version](https://badge.fury.io/js/@customerglu%2Freact-web-sdk.svg)](https://badge.fury.io/js/@customerglu%2Freact-web-sdk)

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:

```sh
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:

[![Run In Postman](https://run.pstmn.io/button.svg)](https://app.getpostman.com/run-collection/6995209-c95f9bd3-2538-4869-940a-69e7a2972487?action=collection%2Ffork\&source=rip_markdown\&collection-url=entityId%3D6995209-c95f9bd3-2538-4869-940a-69e7a2972487%26entityType%3Dcollection%26workspaceId%3D026e7fe7-dae7-49d3-a47a-03311ded3d22)

1. Fork the Postman Collection.
2. Get **CustomerGlu** `writeKey` from [here](https://docs.customerglu.com/schema/faq#find-customerglu-api-key).
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

```jsx
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:

[![Edit cg-react-sandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/6q5ss2?file=%2Fsrc%2Fstyles.css%3A5%2C4)

{% hint style="info" %}
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.
{% endhint %}

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:

```shell
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.