Workspace369 · Booking

Booking embed examples

Pick the setup that matches your site, copy the block, replace the workspace id and page slug (Share & embed in the app gives you both).

Everything here books a demo workspace, so anything you book is test data.

Embed booking on your websiteEvery attribute, the JavaScript API, and the troubleshooting list.
Set up a booking embed with an AI assistantThe whole contract in one page, written to paste into ChatGPT, Claude or Copilot.

Inline on the page

The scheduler sits in the page and grows to fit. Best where booking is the point of the page.

The scheduler below is the Apex Auto Spa booking page: three services, instant booking.

Scrolls inside this box on the examples page; on your site the frame grows to its full height.

HTML

<script src="https://369.dev/booking.js" data-booking
  data-workspace="demo_showcase_apex_auto_spa" async></script>

Paste the inline snippet in the body of your page, where the scheduler should appear.

Open the booking pagehttps://369.dev/ws/demo_showcase_apex_auto_spa/book

Popup button

A button in the corner of every page opens the scheduler over your content. Best when booking is a secondary action.

A floating button on every page. Click it, or the button in the corner of this page.

HTML

<script src="https://369.dev/booking.js" data-booking
  data-workspace="demo_showcase_apex_auto_spa"
  data-page="round-robin-team"
  data-mode="popup" data-label="Book a detail" data-color="#111827" async></script>

This page has two specialists and picks whoever is free.

Open the booking pagehttps://369.dev/ws/demo_showcase_apex_auto_spa/book/round-robin-team

Your own button or link

Your own button, link or menu item opens the scheduler. Nothing of ours shows on the page.

The link below is a real trigger. It opens the page where the visitor picks a specialist.

Choose your specialist

HTML

<script src="https://369.dev/booking.js" data-booking
  data-workspace="demo_showcase_apex_auto_spa"
  data-page="choose-specialist"
  data-mode="api" async></script>

<a href="https://369.dev/ws/demo_showcase_apex_auto_spa/book/choose-specialist" data-w369-booking>
  Choose your specialist
</a>

Any button or link opens the scheduler. Add data-w369-booking to it and keep a real link for visitors without JavaScript.

Open the booking pagehttps://369.dev/ws/demo_showcase_apex_auto_spa/book/choose-specialist

Your own form, then the scheduler

Ask for the details in your own form, then hand them over. The visitor never types their name twice.

Fill the form below. The scheduler opens on the time picker with your answers in it.

HTML

<script src="https://369.dev/booking.js" data-booking
  data-workspace="demo_showcase_apex_auto_spa"
  data-service="demo_booking_express_wash"
  data-mode="api" async></script>

<form id="lead-form">
  <input name="name" placeholder="Your name" required>
  <input name="email" type="email" placeholder="you@company.com" required>
  <!-- Phone numbers need their country code -->
  <input name="phone" type="tel" placeholder="+14155550100" required>
  <input name="company" placeholder="Company">
  <button type="submit">Pick a time</button>

Your form collects the details; the scheduler opens on the time picker with them filled in. Anything in metadata lands on the booking and the client record.

Open the booking pagehttps://369.dev/ws/demo_showcase_apex_auto_spa/book

Inside your own modal

Put the scheduler inside something you own: a dialog, a drawer, a step in your checkout.

The button below opens our own dialog with the scheduler inside it.

HTML

<script src="https://369.dev/booking.js" data-booking
  data-workspace="demo_showcase_apex_auto_spa"
  data-page="intake-forms" data-mode="api" async></script>

<button type="button" id="open-modal">Book a detail</button>

<dialog id="booking-modal">
  <button type="button" id="close-modal" aria-label="Close">Close</button>
  <div id="modal-slot"></div>
</dialog>

<script>

Render the scheduler inside your own dialog with mount(); call destroy() when it closes.

Open the booking pagehttps://369.dev/ws/demo_showcase_apex_auto_spa/book/intake-forms

Plain iframe

One iframe, no script. For a site builder or CMS that blocks custom JavaScript.

The frame below is a page that needs approval before anything reaches the calendar.

HTML

<iframe src="https://369.dev/ws/demo_showcase_apex_auto_spa/book/deposit-review?embed=1" title="Book an appointment" width="100%" height="900" style="border:0;display:block" loading="lazy"></iframe>
<a href="https://workspace369.com/?utm_source=powered_by&amp;utm_medium=booking&amp;utm_campaign=powered-by&amp;utm_content=iframe" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:500 12px/1 system-ui,sans-serif;color:#6b7280;text-decoration:none"><img src="https://369.dev/logo/favicon-32x32.png" width="14" height="14" alt=""> Powered by <strong>Workspace369</strong></a>

One iframe, fixed height, no script. This page needs approval, so a booking here waits for the team.

Open the booking pagehttps://369.dev/ws/demo_showcase_apex_auto_spa/book/deposit-review

Layouts and themes

The booking page sets the layout; the embed can set the colours.

Every page has a layout and a theme. Open a few to compare.

Layouts and scheduling rules

Buffers and daily limitsCalendar-first layout Calendar firstNo service images Large service galleryServices-first layout

Themes

corporate dark luxury nord emerald cupcake

HTML

<script src="https://369.dev/booking.js" data-booking
  data-workspace="demo_showcase_apex_auto_spa"
  data-page="large-gallery"
  data-theme="nord" async></script>

data-theme takes any of the 35 theme names. Leave it off and the page keeps the theme it was given in the app.

Open the booking pagehttps://369.dev/ws/demo_showcase_apex_auto_spa/book/large-gallery

Language

The scheduler follows the language of the visitor's browser. Set data-lang to show one language on every visit.

The scheduler below is the same booking page in Polish.

Scrolls inside this box on the examples page; on your site the frame grows to its full height.

HTML

<script src="https://369.dev/booking.js" data-booking
  data-workspace="demo_showcase_apex_auto_spa"
  data-lang="pl" async></script>

data-lang takes a language code such as pl, de or pt-PT. Leave it off and the page follows the language of the visitor's browser.

Open the booking pagehttps://369.dev/ws/demo_showcase_apex_auto_spa/book

Phone numbers

Every phone number needs its country code: a +, the country code, then the number. +14155550100, +442071234567 and +48221234567 all work. Anything else reaches the scheduler for the visitor to correct.

JavaScript

W369Booking.open({ prefill: { phone: '+14155550100' } });