@justbookme.ai/chat-widget NPM

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:

User Info Endpoint: Returns Calendly scheduling information
- Default path: ${apiUrl}/user-info
- Expected response: { scheduling_url: string, name?: string, ... }
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