Chatwoot React Components

React components for embedding Chatwoot messaging interface with Vue Web Components under the hood.

Installation

npm install @scmmishra/woot-react-dev
# or
yarn add @scmmishra/woot-react-dev
# or
pnpm add @scmmishra/woot-react-dev

Usage

Basic MessageList Integration

import React from 'react';
import { ChatwootProvider, ChatwootConversation } from '@scmmishra/woot-react-dev';
import '@scmmishra/woot-react-dev/style.css';

function App() {
  return (
    <ChatwootProvider
      baseURL="https://your-chatwoot-instance.com"
      userId="user-123"
      accountId="your-auth-token"
      conversationId={123}
      websocketURL="wss://your-chatwoot-instance.com"
      pubsubToken="your-pubsub-token"
    >
      <ChatwootConversation/>
    </ChatwootProvider>
  );
}

Components

ChatwootProvider

Root provider component that manages global configuration and initialization.

Props:

• baseURL (string, required): Your Chatwoot instance URL
• accountId (string|number, required): User identifier
• userToken (string, required): Authentication token
• conversationId (number, required): ID of the conversation to display
• websocketURL (string, optional): WebSocket endpoint, defaults to baseURL/cable
• pubsubToken (string, optional): PubSub token, defaults to userToken

ChatwootConversation

Component that renders a specific conversation interface.

useChatwoot

Hook to access the Chatwoot configuration within a ChatwootProvider.

import { useChatwoot } from '@scmmishra/woot-react-dev';

function MyComponent() {
  const { baseURL, userId, userToken } = useChatwoot();
  // Use configuration as needed
}