React Adapter
Chat Widget Adapters
Introduction
Adapter core
React Adapter
Vue Adapter
Angular Adapter

React Adapter

This library allows to render and interact with the LiveChat Chat Widget inside a React application.

Installation

Using npm

npm install @livechat/widget-react

Using a script tag

<script src="http://unpkg.com/@livechat/widget-core@1.0.1"></script>
<script src="https://unpkg.com/@livechat/widget-react@1.0.1"></script>

Usage

Render

import { LiveChatWidget, EventHandlerPayload } from "@livechat/widget-react";

function App() {
  function handleNewEvent(event: EventHandlerPayload<"onNewEvent">) {
    console.log("LiveChatWidget.onNewEvent", event);
  }

  return (
    <LiveChatWidget
      license="12345678"
      visibility="maximized"
      onNewEvent={handleNewEvent}
    />
  );
}

Props

Config data

All properties described below are used for initialization on the first render and later updates of the chat widget with new values on change.

PropType
licensestring (required)
groupstring
visibilitystring
customerNamestring
customerEmailstring
chatBetweenGroupsboolean
sessionVariablesRecord<string, string>
visibility'maximized' | 'minimized' | 'hidden'
Event handlers

All event handlers listed below are registered if provided for the first time. They unregister on the component cleanup or the property value change. Descriptions of all events are available after clicking on the associated links.

Hooks

This package exports a set of React Hooks that allow for consuming reactive data from the chat widget in any place of the application as long as the LiveChatWidget component is rendered in the tree.

useWidgetState

Access the current chat widget availability or visibility state if the chat widget is loaded.

import { useWidgetState } from "@livechat/widget-react";

function App() {
  const widgetState = useWidgetState();

  if (widgetState) {
    return (
      <div>
        <span>{widgetState.availability}</span>
        <span>{widgetState.visibility}</span>
      </div>
    );
  }
}
useWidgetIsReady

Check if the chat widget is ready using the boolean flag isWidgetReady.

import { useWidgetIsReady } from "@livechat/widget-react";

function App() {
  const isWidgetReady = useWidgetIsReady();

  return <div>Chat Widget is {isWidgetReady ? "loaded" : "loading..."}</div>;
}
useWidgetChatData

Access the chatId and threadId of the chat if there's one currently available.

import { useWidgetChatData } from "@livechat/widget-react";

function App() {
  const chatData = useWidgetChatData();

  if (chatData) {
    return (
      <div>
        <span>{chatData.chatId}</span>
        <span>{chatData.threadId}</span>
      </div>
    );
  }
}
useWidgetGreeting

Access the current greeting id and uniqueId if one is currently displayed (received and not hidden).

import { useWidgetGreeting } from "@livechat/widget-react";

function App() {
  const greeting = useWidgetGreeting();

  if (greeting) {
    return (
      <div>
        <span>{greeting.id}</span>
        <span>{greeting.uniqueId}</span>
      </div>
    );
  }
}
useWidgetCustomerData

Access the id, isReturning, status, and sessionVariables of the current customer if the chat widget is loaded.

import { useWidgetCustomerData } from "@livechat/widget-react";

function App() {
  const customerData = useWidgetCustomerData();

  if (customerData) {
    return (
      <div>
        <span>{customerData.id}</span>
        <span>{customerData.isReturning}</span>
        <span>{customerData.status}</span>
        <ul>
          {Object.entries(customerData.sessionVariables).map(([key, value]) => (
            <li key={key}>{value}</li>
          ))}
        </ul>
      </div>
    );
  }
}

...