Using Chat Widget Adapters - Text Documentation

Chat Widget Adapters connect the Text Chat Widget to React, Vue, and Angular. They map widget initialization, updates, events, and cleanup to each framework’s component lifecycle and reactivity model.

Before you start

Use an adapter instead of adding the standard widget installation code. The adapter creates the widget when its component mounts and destroys it when the component unmounts. You need your organization ID to initialize the widget. Find it in your widget code in website settings.

Choose an adapter

Framework	Library
React	@livechat/widget-react
Vue	@livechat/widget-vue
Angular	@livechat/widget-angular

How adapters work

Each adapter initializes the widget on mount, translates property changes into JavaScript API updates, keeps reactive data synchronized with widget events, and cleans up on unmount. See Adapter core for the shared lifecycle and data model.

If you need to	Use
Control the standard widget without a React, Vue, or Angular adapter	Chat Widget JavaScript API
Build a customer-facing chat interface without the standard widget	Customer SDK

For a broader comparison, see Chat Widget APIs.

Open-source project

The adapters are maintained in the Chat Widget Adapters repository. Use the repository to inspect the source code, report an issue, or request a feature.