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

npm install @justbookme.ai/chat-widget

CDN

<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:

<!-- 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

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:

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

# 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

Credits

Developed by JustBookMe.ai