Embed widget

For when the client wants the booking flow on their own website. One JavaScript file, no React dependency, plain DOM.

Two usage modes

<script
  src="https://your-platform.com/widget/book.js"
  data-service="[agency-id]/[client-id]/[service-id]"
  data-button-text="Book a haircut"
  data-button-color="#4f46e5"
  async></script>

<script src="https://your-platform.com/widget/book.js" async></script>
 
<div data-booking-widget="[agency]/[client]/haircut"
     data-button-text="Book Haircut"></div>
<div data-booking-widget="[agency]/[client]/manicure"
     data-button-text="Book Manicure"></div>

Behaviour

• Click → opens the hosted booking page as a modal iframe
• Mobile (< 640px) → full-screen modal instead of centered card
• Close: × button, click-outside, ESC key
• Body scroll locked while open

Style isolation

Every element is data-attribute scoped ([data-gmb-booking-btn], etc.) with !important on key properties so the host site’s CSS can’t accidentally restyle the widget. No iframe Shadow DOM needed.

API for advanced integrators

window.gmbBookingWidget exposes:

• open(servicePath) — open the modal programmatically
• close() — close
• refresh() — rescan for placeholder elements added after page load (useful with SPAs)

Where to get the snippet

/dashboard/calendar-services → Service Catalog row → Copy embed. The snippet is pre-filled with the service IDs + a sensible default button colour from the service’s chip colour.