@bookinghub/widget
v0.12.3
Published
Embeddable booking widget for BookingHub merchants
Readme
@bookinghub/widget
Embeddable booking widget for BookingHub merchants. Drop a single <script> tag on any website and your customers can book services directly.
- Zero dependencies at runtime
- Shadow DOM isolation — works on any website without CSS conflicts
- 33 KB gzipped
Quick Start
Add this snippet before </body> on your website:
<script
src="https://cdn.bookinghub.ge/bookinghub-widget.iife.js"
data-slug="YourOrgSlug"
></script>That's it. A floating "Book Now" button appears in the bottom-right corner.
Script Attributes
| Attribute | Required | Default | Description |
|-----------|----------|---------|-------------|
| data-slug | Yes | — | Your organization slug (from BookingHub dashboard) |
| data-locale | No | ka | Locale for the widget UI |
Installation Methods
CDN (recommended for most websites)
<!-- Latest version -->
<script src="https://cdn.bookinghub.ge/bookinghub-widget.iife.js" data-slug="YourOrgSlug"></script>
<!-- Pinned version -->
<script src="https://cdn.bookinghub.ge/v1/bookinghub-widget.iife.js" data-slug="YourOrgSlug"></script>Works with async and defer:
<script async src="https://cdn.bookinghub.ge/bookinghub-widget.iife.js" data-slug="YourOrgSlug"></script>npm
npm install @bookinghub/widgetimport { init } from '@bookinghub/widget'
init({
slug: 'YourOrgSlug',
})JavaScript API
When loaded via CDN, the widget is available as BookingHubWidget on the global scope:
<script src="https://cdn.bookinghub.ge/bookinghub-widget.iife.js"></script>
<script>
BookingHubWidget.init({
slug: 'YourOrgSlug',
locale: 'ka', // optional
target: document.getElementById('my-container'), // optional, defaults to document.body
})
</script>Platform Examples
WordPress
Add to your theme's footer.php before </body>, or use a plugin like "Insert Headers and Footers":
<script src="https://cdn.bookinghub.ge/bookinghub-widget.iife.js" data-slug="YourOrgSlug"></script>Wix
- Go to Settings > Custom Code
- Add new code snippet, paste the
<script>tag - Set placement to "Body - end"
Squarespace
- Go to Settings > Advanced > Code Injection
- Paste the
<script>tag in the "Footer" section
Shopify
- Go to Online Store > Themes > Edit Code
- Open
theme.liquid - Paste the
<script>tag before</body>
Webflow
- Go to Project Settings > Custom Code
- Paste the
<script>tag in the "Footer Code" section
Next.js
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://cdn.bookinghub.ge/bookinghub-widget.iife.js"
data-slug="YourOrgSlug"
strategy="lazyOnload"
/>
</body>
</html>
)
}Nuxt
<!-- app.vue -->
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<script setup>
useHead({
script: [
{
src: 'https://cdn.bookinghub.ge/bookinghub-widget.iife.js',
'data-slug': 'YourOrgSlug',
defer: true,
},
],
})
</script>Static HTML / Any Website
<!DOCTYPE html>
<html>
<head>
<title>My Business</title>
</head>
<body>
<!-- your page content -->
<script src="https://cdn.bookinghub.ge/bookinghub-widget.iife.js" data-slug="YourOrgSlug"></script>
</body>
</html>How It Works
- The script creates an isolated Shadow DOM container on the page
- A floating button appears in the bottom-right corner
- Clicking it opens a side panel with:
- Service selection (browse by category)
- Specialist and time slot picker
- Payment summary
- Login/registration (phone + SMS verification)
- On confirmation, the booking is created via the BookingHub API
Browser Support
All modern browsers (Chrome 53+, Firefox 63+, Safari 10+, Edge 79+).
Development
pnpm install # install dependencies
pnpm dev # dev server with HMR
pnpm build # production build → dist/
pnpm check # type-check
pnpm preview # preview production buildindex.html— dev preview (source-driven, used bypnpm dev)test.html— embed test (loads builtdist/bundle, simulates real embed)