@agilist/chat-widget v1.0.1

Chat Widget

A highly customizable chat widget that can be easily embedded into any website.

Quick Start

Add the following code to your HTML page:

<!-- Chat Widget -->
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18.3.1",
    "react-dom": "https://esm.sh/react-dom@18.3.1",
    "react-dom/client": "https://esm.sh/react-dom@18.3.1/client"
  }
}
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@agilist/chat-widget@1.0.0/dist/chat.css" />
<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@agilist/chat-widget@1.0.0/dist/chat.es.js';
  
  createChat({
    webhookUrl: "your-webhook-url",
    configId: "your-config-id"  // Optional: Configuration will be loaded from Supabase
  });
</script>

Installation Options

1. Using Hosted Configuration (Recommended)

The easiest way to use the chat widget is with a hosted configuration:

1. Configure your chat widget in the dashboard
2. Get your configuration ID
3. Add the widget to your site with minimal code

<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18.3.1",
    "react-dom": "https://esm.sh/react-dom@18.3.1",
    "react-dom/client": "https://esm.sh/react-dom@18.3.1/client"
  }
}
</script>
<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@agilist/chat-widget@1.0.0/dist/chat.es.js';
  
  createChat({
    configId: 'your-config-id',
    webhookUrl: 'your-webhook-url'
  });
</script>

2. Using Local Configuration

You can also configure the widget directly in your code:

<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18.3.1",
    "react-dom": "https://esm.sh/react-dom@18.3.1",
    "react-dom/client": "https://esm.sh/react-dom@18.3.1/client"
  }
}
</script>
<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@agilist/chat-widget@1.0.0/dist/chat.es.js';
  
  createChat({
    webhookUrl: 'your-webhook-url',
    config: {
      branding: {
        name: 'Customer Support',
        avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=chat',
        welcomeMessage: 'Hi there! How can we help you today?'
      },
      colors: {
        primary: '#0EA5E9'
      }
    }
  });
</script>

Configuration Options

The chat widget supports extensive customization. Here are the main configuration options:

Branding

• name: Widget title
• avatarUrl: URL for the chat bot avatar
• avatarShape: 'circle' | 'square' | 'rounded'
• welcomeMessage: Initial message shown to users
• placeholder: Input placeholder text
• showAvatar: Show/hide avatar
• showTimestamp: Show/hide message timestamps

Colors

• primary: Primary brand color
• secondary: Secondary/accent color
• userBubble: User message background
• botBubble: Bot message background
• userText: User message text color
• botText: Bot message text color

Layout

• width: Widget width
• height: Widget height
• position: 'left' | 'right'
• shape: 'rectangle' | 'pill' | 'custom'
• startMaximized: Open widget on load
• autoPopup: Configure automatic popup behavior

Typography

• fontFamily: Main font family
• fontSize: Base, header, and timestamp sizes
• fontWeight: Normal and bold weights

Development

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Build for production:

   npm run build

Publishing

1. Update version in package.json

2. Build the package:

   npm run build

3. Publish to npm:

   npm publish

License

MIT