React Adapter
This library allows to render and interact with the LiveChat Chat Widget inside a React application.
Installation
Using npm
REACT ADAPTER USING NPM
npm install @livechat/widget-react
Using a script tag
REACT ADAPTER USING 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
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.
Prop | Type |
---|---|
license | string (required) |
group | string |
customerName | string |
customerEmail | string |
chatBetweenGroups | boolean |
sessionVariables | Record<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.
- onReady
- onAvailabilityChanged
- onVisibilityChanged
- onCustomerStatusChanged
- onNewEvent
- onFormSubmitted
- onRatingSubmitted
- onGreetingDisplayed
- onGreetingHidden
- onRichMessageButtonClicked
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.
USE WIDGET STATE
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
.
USE WIDGET IS READY
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.
USE WIDGET CHAT DATA
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).
USE WIDGET GREETING
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.
USE WIDGET CUSTOMER DATA
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>
);
}
}