npm package: @justbookme.ai/chat-widget
Description: A customizable Vue 3 chat widget designed for scheduling meetings through Calendly integration. This widget provides a seamless chat experience with a built-in scheduling flow.
Latest version: 1.4.0

# JustBookMe.ai Chat Widget

A customizable Vue 3 chat widget designed for scheduling meetings through Calendly integration. This widget provides a seamless chat experience with a built-in scheduling flow.

![JustBookMe.ai Chat Widget]

## Features

- 💬 **Interactive Chat Interface**: Clean, modern UI for user interactions
- 📅 **Calendly Integration**: Seamless scheduling experience
- 🔔 **Attention-Grabbing Bubble**: Customizable chat bubble to prompt user engagement
- 🌓 **Theming Support**: Light and dark mode compatibility
- 📱 **Responsive Design**: Works on all device sizes
- 💾 **Persistent Chat History**: Conversations are saved in localStorage
- 🔄 **Error Handling**: Graceful error recovery with retry options
- 🔌 **Easy Integration**: Simple to add to any website

## Installation

### NPM

```bash
npm install @justbookme.ai/chat-widget
```

### CDN

```html
<link rel="stylesheet" href="https://unpkg.com/@justbookme.ai/chat-widget/dist/chat-widget.css">
<script src="https://unpkg.com/@justbookme.ai/chat-widget/dist/chat-widget.umd.js"></script>
```

## Usage

### Basic Setup

Add the widget to your HTML:

```html
<!-- Add container for the widget -->
<div id="chat-widget"></div>

<!-- Add Vue first (if not already in your project) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Add Chat Widget -->
<link rel="stylesheet" href="https://unpkg.com/@justbookme.ai/chat-widget/dist/chat-widget.css">
<script src="https://unpkg.com/@justbookme.ai/chat-widget/dist/chat-widget.umd.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.ChatWidgetConfig = {
      apiKey: "YOUR_API_KEY",
      apiUrl: "YOUR_API_URL",
      bubbleText: "Need to schedule a meeting? Click here!"
    };

    window.ChatWidget.initChatWidget(window.ChatWidgetConfig);
  });
</script>
```

### Vue Application Integration

```javascript
import { createApp } from 'vue'
import { initChatWidget } from '@justbookme.ai/chat-widget'
import '@justbookme.ai/chat-widget/style'

// Initialize the widget
initChatWidget({
  apiKey: "YOUR_API_KEY",
  apiUrl: "YOUR_API_URL",
  target: "#chat-widget-container", // Optional: defaults to #chat-widget
  bubbleText: "Need to schedule a meeting? Click here!" // Optional
})
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `apiKey` | String | Required | Your API key for authentication |
| `apiUrl` | String | Required | The URL of your backend API |
| `target` | String | `#chat-widget` | CSS selector for the container element |
| `bubbleText` | String | `Need to schedule a meeting? Click here to chat!` | Text displayed in the attention bubble |
| `theme` | String | `light` | Theme of the widget (`light` or `dark`) |
| `position` | String | `bottom-right` | Position of the widget (`bottom-right` or `bottom-left`) |
| `colors` | Object | `{}` | Custom color overrides (see below) |

### Custom Colors

You can customize the colors of different elements:

```javascript
window.ChatWidgetConfig = {
  // ... other options
  colors: {
    userMessage: {
      background: "#4F46E5",
      text: "#FFFFFF"
    },
    botMessage: {
      background: "#F3F4F6",
      text: "#1F2937"
    },
    errorMessage: {
      background: "#FEE2E2",
      text: "#B91C1C"
    }
  }
};
```

## API Requirements

The widget expects your backend API to provide the following endpoints:

1. **User Info Endpoint**: Returns Calendly scheduling information
   - Default path: `${apiUrl}/user-info`
   - Expected response: `{ scheduling_url: string, name?: string, ... }`

2. **Message Endpoint**: Handles chat messages
   - Default path: `${apiUrl}/message`
   - Request payload: `{ message: string, days_range: number, chat_history: Message[], is_current_message: boolean }`
   - Expected response: `{ message: string, status: 'success' | 'error', book: boolean }`

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## License

[MIT License](LICENSE)

## Credits

Developed by [JustBookMe.ai](https://justbookme.ai)