> ## Documentation Index
> Fetch the complete documentation index at: https://www.text.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How to start

This tutorial is here to help you get started with the Customer SDK.

## Create an application

First, you need to create an OAuth client in Text. Go to [Settings → API access → OAuth clients](https://www.text.com/app/settings/integrations/api-access/oauth-clients), select **Web app** as the client type, add the `customers:own` scope, and configure your redirect URI.

## Install Customer SDK

You can use the Customer SDK in two different ways:

### Using npm

`npm install --save @livechat/customer-sdk`

Import the SDK in your code:

`import * as CustomerSDK from '@livechat/customer-sdk'`

Or use the node-style `require` call:

`const CustomerSDK = require('@livechat/customer-sdk')`

### Using a script tag - UMD module hosted on unpkg's CDN

`<script src="https://unpkg.com/@livechat/customer-sdk@5.0.0"></script>`

If you just want to look around and play with the SDK, check out our
[sample chat widget implementation](https://codesandbox.io/s/rm3prxw88n).

Create an OAuth client in Text ([Settings → API access → OAuth clients](https://www.text.com/app/settings/integrations/api-access/oauth-clients)) with the **Web app** client type, then pass the configured `redirectUri` to `init` along with `organizationId` and `clientId`.

## Using the API

To use the API you will first need to create an instance using the `init` function.
You will need to provide your organizationId and clientId when creating a Customer SDK instance.

Other optional configuration parameters are also available:

| parameters           | type               | default | description                                                                                                                                                                                          |
| -------------------- | ------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| organizationId       | string             |         | Your organization ID. You receive this value when creating a new Text account.                                                                                                                       |
| clientId             | string             |         | Your client ID. You receive this value when you create an OAuth client in Text.                                                                                                                      |
| autoConnect          | boolean            | true    | Optional. If set to `false`: the SDK will not reconnect automatically.                                                                                                                               |
| groupId              | number             | 0       | Optional. The ID of the group to connect to.                                                                                                                                                         |
| uniqueGroups         | boolean            | false   | Optional. If set to `true`: creates a separate customer identity for each group. Requires `groupId` to be set.                                                                                       |
| region               | 'dal' \| 'fra'     | 'dal'   | Optional. The server region for your account.                                                                                                                                                        |
| redirectUri          | string             |         | Optional. The URI your webview is redirected to after authorization. Use only in React Native.                                                                                                       |
| customerDataProvider | () => CustomerData |         | Optional. A function that provides customer data during login. In general, [`updateCustomer()`](#updatecustomer) should be preferred.                                                                |
| identityProvider     | () => CustomerAuth |         | Optional. Allows you to provide your own `CustomerAuth` instance with customer access token handlers. See [Custom Identity Provider](/authentication/custom-identity-provider) for more information. |
| page                 | object             |         | Optional. Information about the customer's current page.                                                                                                                                             |
| page.url             | string             |         | Optional. The customer's current page URL.                                                                                                                                                           |
| page.title           | string             |         | Optional. The customer's current page title.                                                                                                                                                         |
| referrer             | string             |         | Optional. The page referrer.                                                                                                                                                                         |
| tabId                | string             |         | Optional. An identifier for the browser tab. Sent as `tab_id` in the login payload, useful for distinguishing multiple tabs from the same customer.                                                  |

CustomerData:

| parameters    | type   | description                               |
| ------------- | ------ | ----------------------------------------- |
| name          | string | Optional. The customer's name.            |
| email         | string | Optional. The customer's email address.   |
| sessionFields | object | Key-value pairs of custom session fields. |

CustomerAuth:

| parameters    | type                     | description                                                                         |
| ------------- | ------------------------ | ----------------------------------------------------------------------------------- |
| getFreshToken | () => `Promise<Token>`   | Should resolve with a freshly requested customer access token.                      |
| getToken      | () => `Promise<Token>`   | Should resolve with the currently stored customer access token.                     |
| hasToken      | () => `Promise<boolean>` | Should resolve with `true` if a token has already been acquired, `false` otherwise. |
| invalidate    | () => `Promise<void>`    | Should handle token invalidation and clearing the locally cached value.             |

The `init` function will return a Customer SDK instance:

```js theme={null}
const customerSDK = CustomerSDK.init({
  organizationId: ORGANIZATION_ID,
  clientId: CLIENT_ID,
});
```

With `customerSDK`, you can attach [events](#events):

```js theme={null}
customerSDK.on("new_event", (newEvent) => {
  console.log(newEvent);
});
```

Or execute [methods](#methods):

```js theme={null}
const chatId = "OU0V0P0OWT";
customerSDK
  .sendEvent({
    chatId,
    event: {
      type: "message",
      text: "Hi!",
    },
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });
```