embeddable-booking-plugin

A reusable React 19 booking widget styled with Tailwind CSS v4, designed to drop into marketing sites, kiosks, or POS webviews. It covers the full flow—staff → services → date/time → confirmation—and can talk to your backend through a small API interface. An optional video carousel appears only when enabled in settings.

Install

npm install embeddable-booking-plugin react react-dom

Peer dependencies: react and react-dom ^19.

Styles

Import the compiled stylesheet once in your app (or shell that loads the widget):

import 'embeddable-booking-plugin/styles.css'

React usage

import { BookingPlugin } from 'embeddable-booking-plugin'
import 'embeddable-booking-plugin/styles.css'

// Option A: JSON data mode (no backend)
const data = {
  staff: [{ id: 's1', name: 'Jordan Lee' }],
  services: [{ id: 'v1', name: 'Signature cut', durationMinutes: 45, priceCents: 6500, staffIds: ['s1'] }],
  slots: [
    {
      id: 'slot1',
      staffId: 's1',
      date: '2026-04-08',
      startIso: '2026-04-08T09:00:00',
      endIso: '2026-04-08T09:45:00',
      label: '09:00',
    },
  ],
  bookingResult: (payload) => ({
    id: 'local_1',
    reference: 'LOCAL-1234',
    status: 'confirmed',
    message: 'Saved locally.',
    payload,
  }),
}

export function Page() {
  return (
    <BookingPlugin
      data={data}
      settings={{
        businessName: 'Studio North',
        tagline: 'Book in under a minute.',
        showVideoGallery: true,
        videoGalleryTitle: 'See the space',
        videos: [
          { id: '1', title: 'Tour', src: 'https://www.youtube.com/watch?v=VIDEO_ID', type: 'youtube' },
          { id: '2', title: 'Promo', src: 'https://example.com/clips/promo.mp4', type: 'file' },
        ],
        currencyCode: 'USD',
        locale: 'en-US',
      }}
      onStepChange={(step) => console.log('step', step)}
      onBookingComplete={(result, payload) => console.log('booked', result, payload)}
    />
  )
}

Video section

• Set settings.showVideoGallery to true and provide a non-empty settings.videos array to show the carousel.
• If showVideoGallery is false, omitted, or videos is empty, the video block is not rendered.

Supported VideoGalleryItem shapes:

• File / progressive download: type: 'file' (or omit) and src pointing to an MP4/WebM; optional thumbnailUrl for the poster.
• YouTube: type: 'youtube' or a youtube.com / youtu.be URL in src.
• Generic embed: type: 'embed' and src set to an embeddable HTTPS URL (iframe src).

Embed in any page (vanilla host)

import { mountBookingPlugin } from 'embeddable-booking-plugin'
import 'embeddable-booking-plugin/styles.css'

mountBookingPlugin('#booking-root', {
  data,
  settings: { businessName: 'Main St. Salon' },
})

API integration

The plugin supports two integration modes:

• JSON data mode: pass data (staff/services/slots) — no backend needed.
• API mode: pass an api object with these methods:

| Method | Default path (customize in your backend) | |--------|----------------------------------------| | listStaff | GET /staff | | listServices | GET /staff/:id/services | | listSlots | GET /slots?staffId=&date=&serviceIds= | | createBooking | POST /bookings |

All methods should return JSON. If your backend returns extra fields in createBooking, the confirmation screen will show them under “View returned booking details”.

Local demo

npm install
npm run dev

Build & publish

npm run build
npm publish --access public

The prepublishOnly script runs the build automatically.

License

MIT #� �b�o�o�k�i�n�g�-�s�l�o�t� � �