> ## Documentation Index
> Fetch the complete documentation index at: https://www.text.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Using Chat Widget Adapters

> Add the Text Chat Widget to React, Vue, or Angular applications with framework-native components and reactive access to widget state.

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](https://www.text.com/app/settings/websites).

## Choose an adapter

| Framework   | Library                                                                            |
| ----------- | ---------------------------------------------------------------------------------- |
| **React**   | [@livechat/widget-react](https://www.npmjs.com/package/@livechat/widget-react)     |
| **Vue**     | [@livechat/widget-vue](https://www.npmjs.com/package/@livechat/widget-vue)         |
| **Angular** | [@livechat/widget-angular](https://www.npmjs.com/package/@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](/docs/api/chat-widget-adapters/adapters-core) for the shared lifecycle and data model.

## Related APIs

| If you need to                                                       | Use                                                     |
| -------------------------------------------------------------------- | ------------------------------------------------------- |
| Control the standard widget without a React, Vue, or Angular adapter | [Chat Widget JavaScript API](/docs/api/chat-widget-js-api/)  |
| Build a customer-facing chat interface without the standard widget   | [Customer SDK](/docs/sdk/customer-sdk/overview/introduction) |

For a broader comparison, see [Chat Widget APIs](/docs/api-overview/chat-widget-apis).

## Open-source project

The adapters are maintained in the [Chat Widget Adapters repository](https://github.com/livechat/chat-widget-adapters). Use the repository to inspect the source code, [report an issue](https://github.com/livechat/chat-widget-adapters/issues), or request a feature.