# LiveChat

[LiveChat](https://www.livechat.com/) is a live chat software and customer service platform. It lets you manage user interactions across multiple channels and deliver more effective customer service.

RudderStack supports LiveChat as a destination where you can seamlessly send your event data.

## Connection compatibility

{{< destination-config >}}

{{< info >}}
In the web device mode integration, that is, using [JavaScript SDK]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/_index.md" >}}) as a source, RudderStack loads the LiveChat native SDK from the`https://cdn.livechatinc.com/` domain.

Based on your website's content security policy, you might need to [allowlist this domain]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk.md#allowlist-destination-domain" >}}) to load the LiveChat SDK successfully.
{{< /info >}}

## Get started

Once you have confirmed that the source platform supports sending events to LiveChat, follow these steps:

1. From your [RudderStack dashboard](https://app.rudderstack.com/), add a source. Then, from the list of destinations, select **LiveChat**.
2. Assign a name to the destination and click **Continue**.

## Connection settings

To successfully configure LiveChat as a destination, you will need to configure the following settings:

{{< image src="images/event-stream-destinations/livechat-connection-settings-1.webp" alt="LiveChat connection settings" >}}

- **License ID**: Enter your LiveChat license ID.

{{< info >}}
For more information on obtaining your LiveChat license ID, refer to the [FAQ]({{< ref "#faq" >}}) section below.
{{< /info >}}

- **Record Live Chat Events**: Enable this setting to allow RudderStack to automatically record your LiveChat interactions as `track` events.

  {{< image src="images/event-stream-destinations/livechat-connection-settings-2.webp" alt="LiveChat connection settings" >}}

  - **List of Events**: If **Record Live Chat Events** setting is enabled, enter the list of LiveChat interactions for RudderStack to track.
  - **Update Event Name in track call**: Use this setting to map the standard LiveChat callback events with custom event names.

  {{< image src="images/event-stream-destinations/livechat-connection-settings-3.webp" alt="LiveChat connection settings" >}}

  {{< info >}}
  For more information on this setting, refer to the [Mapping events]({{< ref "#mapping-events" >}}) section below.
  {{< /info >}}

- **Client-side Events Filtering**: This setting lets you specify which events should be blocked or allowed to flow through to LiveChat.

{{< image src="images/event-stream-destinations/livechat-connection-settings-4.webp" alt="LiveChat connection settings" >}}

{{< info >}}
For more information on this setting, refer to the [Client-side Events Filtering]({{< ref "sources/event-streams/sdks/event-filtering.md" >}}) guide.
{{< /info >}}

- **Use device mode to send events**: As this is a [web device mode]({{< ref "destinations/rudderstack-connection-modes.md#device-mode" >}})-only destination, this setting is enabled by default and cannot be disabled.

## Identify

You can use the [`identify`]({{< ref "event-spec/standard-events/identify.md" >}}) events to send all user-related information to LiveChat.

RudderStack sends various **optional** `identify` properties by calling the following LiveChat functions:

| RudderStack property | LiveChat function |
| :----| :-----|
| `context.traits.email` | [`set_customer_email`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#set-customer-email) | 
| `message.traits` | [`set_custom_variables`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#set-session-variables) | 
| `context.traits.name` | [`set_customer_name`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#set-customer-name) | 

{{< info >}}
RudderStack also leverages the `userId` present in the event to set a custom variable called `User ID`.
{{< /info >}}

A sample `identify` call is shown below:

```javascript
rudderanalytics.identify("1hKOmRA4GRlm", {
  name: "Alex Keener",
  email: "alex@example.com",
  cart_value: "cart",
  "order date": "05/21/2019"
});
```

## Track

If you enable the **Record Live Chat Events** dashboard setting, RudderStack records the LiveChat interactions and sends them as [`track`]({{< ref "event-spec/standard-events/track.md" >}}) events. You can then view and analyze these events in the other tools (connected to the same source in RudderStack).

{{< info >}}
RudderStack only tracks the CTA interactions specified in the **List of Events** field in the dashboard settings. If this setting is not specified, RudderStack tracks all interactions specified in the [Supported events]({{< ref "#supported-events" >}}) section below.
{{< /info >}}

### Supported events

RudderStack automatically records and sends the following <a href="https://developers.livechat.com/docs/extending-chat-widget/javascript-api#callbacks">LiveChat callbacks</a>:

| LiveChat event | `track` event name | Description |
| :---| :---|  :--- |
| [`onReady`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-ready) | `Ready` | When the chat widget has finished loading. |
| [`onAvailabilityChanged`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-availability-changed) |  `Availability Changed` | When the availability has changed for the current group. |
| [`onVisibilityChanged`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-visibility-changed) |  `Visibility Changed` | When the visibility of the chat widget has changed.  |
| [`onCustomerStatusChanged`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-customer-status-changed) |  `Customer Status Changed` |  When the customer's status has changed. |
| [`onNewEvent`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-new-event) |  `New Event` | Called in case of both the incoming and outgoing events. |
| [`onFormSubmitted`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-form-submitted) | `Form Submitted` | Called after a form is submitted in the chat. |
| [`onRatingSubmitted`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-rating-submitted) | `Rating Submitted` | When the customer has rated a chat or cancelled the previous rating. |
| [`onGreetingDisplayed`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-greeting-displayed) | `Greeting Displayed` | When the greeting is displayed to a customer. |
| [`onGreetingHidden`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-greeting-hidden) | `Greeting Hidden` | When the customer cancels the greeting. |
| [`onRichMessageButtonClicked`](https://developers.livechat.com/docs/extending-chat-widget/javascript-api#on-rich-message-button-clicked) | `Rich Message Button Clicked` |  When the customer clicks the rich message button. |

### Mapping events

You can also update the standard LiveChat callback events with custom event names by enabling the **Update Event Name in track call** setting in the RudderStack dashboard and specifying the required mapping:

{{< image src="images/event-stream-destinations/livechat-event-mapping.webp" alt="LiveChat event mapping" >}}

Based on the mappings set in the above image, RudderStack replaces the standard event names `Ready` and `Availability Changed` with `new ready` and `new availability changed` respectively.

## FAQ 

#### Where can I find the LiveChat license ID?

To get your LiveChat license ID, follow these steps:

1. Log into your <a href="https://my.livechatinc.com/">LiveChat dashboard</a>.
2. In the bottom left corner, click the **Settings** icon and go to **Website**. 
3. You can find the license ID included in the installation snippet:

{{< image src="images/event-stream-destinations/livechat-license-id.webp" alt="LiveChat license ID" >}}