@supportai.it/chat-widget/README.md

Chat widget web component for supportAI.it

# Universal Chat Widget

[![](https://data.jsdelivr.com/v1/package/npm/@supportai.it/chat-widget/badge)](https://www.jsdelivr.com/package/npm/@supportai.it/chat-widget)

A universal chat widget that supports vanilla JavaScript/HTML, React TypeScript, and Vue TypeScript. Each framework has its own independent package to avoid unnecessary dependencies.

## Installation

### Using CDN (Vanilla JS/HTML):

```html
<script src="https://cdn.jsdelivr.net/npm/@supportai.it/chat-widget"></script>
```

### Using npm

#### For Vanilla JS/HTML projects:
```bash
# No additional dependency
```

#### For React TypeScript projects:
```bash
npm install @supportai.it/chat-widget
```

#### For Vue TypeScript projects:
```bash
npm install @supportai.it/chat-widget
```

## Usage

### Vanilla JavaScript/HTML

```html
<chat-widget
  chat-id="your-chat-id"
  api-key="your-api-key"
></chat-widget>

<script type="module" src="https://cdn.jsdelivr.net/npm/@supportai.it/chat-widget"></script>
```

### React TypeScript

```tsx
import { ChatWidget, useChatContext } from '@supportai.it/chat-widget/react';

function App() {
  const { updateContext } = useChatContext();

  const handleUpdateContext = () => {
    updateContext({
      user: { id: '123', name: 'John Doe' }
    });
  };

  return (
    <div>
      <ChatWidget
        chatId="your-chat-id"
        apiKey="your-api-key"
      />
      <button onClick={handleUpdateContext}>Update Context</button>
    </div>
  );
}
```

### Vue TypeScript

```vue
<script setup lang="ts">
import { ChatWidget, useChatContext } from '@supportai.it/chat-widget/vue';

const { updateContext } = useChatContext();

const handleUpdateContext = () => {
  updateContext({
    user: { id: '123', name: 'John Doe' }
  });
};
</script>

<template>
  <div>
    <ChatWidget
      chat-id="your-chat-id"
      api-key="your-api-key"
      button-color="#ff0000"
      button-size="56px"
    />
    <button @click="handleUpdateContext">Update Context</button>
  </div>
</template>
```

### Updating Context Dynamically (Vanilla JS)

```javascript
window.dispatchEvent(new CustomEvent("chat-widget/updateContext", {
  detail: {
    user: { id: '123', name: 'John Doe' }
  },
}));
```

### Closing the Widget Programmatically

The widget listens for `postMessage` events from the iframe to close itself. The origin is verified to match the widget's `base-url` for security.

```javascript
// From inside the chat iframe
window.parent.postMessage({ namespace: "chat-widget/close" }, "*");
```

## Props/Attributes

- `chat-id`: The ID of the chat to be opened.
- `api-key`: The API key for authentication.
- `button-color`: Custom button color (Default: #582975)
- `button-hover-color`: Custom hover color (Default: #7b2ba6)
- `button-size`: Button size (Default: 64px)
- `message-bubble`: Display a message bubble on top of the open button (when the chat is closed). Set to `false` to disable.
- `chat-align`: Chat alignment "left" or "right". (Default: right)
- `chat-width`: Chat width (Default: 400px)
- `chat-height`: Chat height (Default: 600px)
- `base-url`: Base URL for the chat service
- `svg-icon`: Custom SVG icon for the chat button

### React/Vue Props

For React use camelCase versions of the attributes


## Framework-Specific Features

### React
- `useChatContext()` hook for easy context updates
- TypeScript support with proper prop types
- React ref forwarding support

### Vue
- `useChatContext()` composable for easy context updates
- TypeScript support with proper prop types
- Vue template ref support

## Package Structure

This package provides three independent entry points:

- **Default (`@supportai.it/chat-widget`)**: Vanilla JS/HTML web component
- **React (`@supportai.it/chat-widget/react`)**: React TypeScript wrapper
- **Vue (`@supportai.it/chat-widget/vue`)**: Vue TypeScript wrapper

Each entry point only includes dependencies relevant to that framework, ensuring minimal bundle size.