chatwoot/app/javascript/ui/usage.md

Chatwoot UI Components Usage Guide

This document explains how to use the Chatwoot UI components library, which can be used both as Web Components (Custom Elements) and as Vue components.

Installation

npm install @chatwoot/ui
# or
yarn add @chatwoot/ui
# or
pnpm add @chatwoot/ui

Usage

As Web Components (Custom Elements)

Web Components can be used in any HTML page or application, regardless of the framework.

<!-- Include the built JS file -->
<script src="https://unpkg.com/@chatwoot/ui/dist/ui.js"></script>

<!-- Use the custom element anywhere in your HTML -->
<chat-button label="Click me"></chat-button>

When the script loads, it automatically registers all custom elements with the browser, making them immediately available for use.

Accessing the Store in Web Components

The components have access to a global store instance. When using Web Components, the store is available through window.__CHATWOOT_STORE__.

You can interact with the store from your JavaScript:

// Access the store
const store = window.__CHATWOOT_STORE__;

// Check store state
console.log(store.state.someData);

// Dispatch actions
store.dispatch('someAction', { data: 'example' });