How to start

This is a legacy reference for Customer SDK v4.0. For the latest version, see the current documentation.

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, 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@3.1.2"></script> If you just want to look around and play with the SDK, check out our sample chat widget implementation. Create an OAuth client in Text (Settings → 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()` should be preferred.
identityProvider	() => CustomerAuth		Optional. Allows you to provide your own `CustomerAuth` instance with customer access token handlers. See 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.

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:

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

With customerSDK, you can attach events:

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

Or execute methods:

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

Overview

Reference

Create an application

Install Customer SDK

Using npm

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

Using the API

​Create an application

​Install Customer SDK

​Using npm

​Using a script tag - UMD module hosted on unpkg’s CDN

​Using the API

Create an application

Install Customer SDK

Using npm

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

Using the API