handonweb-booking-widget

Simple appointment booking widget with a step-by-step wizard. Pick a service, choose a date from the calendar, select a time, fill in your details, and confirm. Zero dependencies.

Install

npm install handonweb-booking-widget

Or include directly:

<link rel="stylesheet" href="booking-widget.css">
<script src="index.js"></script>

Usage

const BookingWidget = require('handonweb-booking-widget');

const booking = new BookingWidget({
  container: document.getElementById('booking'),
  services: [
    { name: 'Free Consultation', duration: 30, price: 0 },
    { name: 'Chatbot Setup', duration: 60, price: 500 }
  ],
  availableSlots: {
    '2026-03-10': ['09:00', '10:00', '11:00', '14:00'],
    '2026-03-11': ['10:00', '13:00', '15:00']
  },
  webhookUrl: 'https://your-webhook.com/booking'
});

How It Works

The widget walks users through 5 steps:

1. Pick a service — shows all available services with duration and price
2. Pick a date — calendar with available dates highlighted
3. Pick a time — shows open time slots for the selected date
4. Enter details — name, email, phone number
5. Confirm — review everything and submit

When confirmed, the booking data is sent as a POST request to your webhook URL (or passed to the onBook callback).

Options

Option	Type	Default	Description
container	HTMLElement	required	DOM element to render into
services	Array	required	Service list: { name, duration, price }
availableSlots	Object	required	Slots by date: { "YYYY-MM-DD": ["HH:MM"] }
webhookUrl	string	null	URL to POST booking data to
onBook	Function	null	Callback receiving booking data
theme	Object	{}	Colour overrides: { primary }

Webhook Data Format

{
  "service": "Chatbot Setup",
  "duration": 60,
  "price": 500,
  "date": "2026-03-10",
  "time": "10:00",
  "name": "John Smith",
  "email": "john@example.com",
  "phone": "+44 7700 900000",
  "bookedAt": "2026-03-09T14:30:00.000Z"
}

Methods

• booking.reset() — Go back to step 1 and clear all selections
• booking.destroy() — Remove the widget from the DOM

Styling

Include booking-widget.css for the default styles. Use the theme.primary option to change the accent colour, or override these classes:

• .bw-container — outer wrapper
• .bw-service-card — service selection cards
• .bw-cal-available — available calendar dates
• .bw-time-slot — time slot buttons
• .bw-btn-primary — primary action button

About Hand On Web

We build AI chatbots, voice agents, and automation tools for businesses.

• 🌐 handonweb.com
• 📧 outreach@handonweb.com
• 📍 Chester, UK

Licence

MIT