Setup

Live in about 5 minutes.

Pick what your website is built with. Every path is the same shape: paste one snippet, publish, done.

What's your website built with?

WordPress + Elementor

~5 min

1

Edit the page with Elementor and drag in the HTML widget where you want the booking form.
2

Paste the snippet into the HTML widget.
3

Update / Publish. (On WordPress.com you need a plan that allows custom code; self-hosted WordPress works out of the box. If nothing shows up, check for a cache plugin and clear it.)

Your snippet

<div
  data-booking-widget
  data-api-base="https://your-domain.example"
  data-publishable-key="pk_your_key_here"
></div>
<script src="https://your-domain.example/widget.global.js" async></script>

This is a placeholder key. Log in to get your real snippet →

Did it work?

Reload the page. You should see the booking widget where you pasted the HTML widget. If not, see pitfalls below.

Pitfalls

WordPress.com plans: the free and Personal plans block custom code. You need Business or a self-hosted WordPress install for the HTML widget to run.
Cache plugins: if you don't see your changes, clear your cache plugin (or your host's server-side cache) after publishing.

WordPress (block editor)

~5 min

1

Edit the page or post and add a Custom HTML block.
2

Paste the snippet into the block.
3

Update / Publish. (On WordPress.com you need a plan that allows custom code; self-hosted WordPress works out of the box.)

Your snippet

<div
  data-booking-widget
  data-api-base="https://your-domain.example"
  data-publishable-key="pk_your_key_here"
></div>
<script src="https://your-domain.example/widget.global.js" async></script>

This is a placeholder key. Log in to get your real snippet →

Did it work?

Reload the page. You should see the booking widget where you added the block. If not, see pitfalls below.

Pitfalls

WordPress.com plans: the free and Personal plans block custom code. You need Business or a self-hosted WordPress install for the Custom HTML block to run scripts.
Cache plugins: if you don't see your changes, clear your cache plugin (or your host's server-side cache) after publishing.

React

~5 min

1Load widget.global.js once, before your app mounts (a <script> tag in index.html works).
2Mount the widget from a useEffect so it only runs in the browser.
3Point apiBase and publishableKey at your own values.
4Render a container element (e.g. <div id="booking-widget" />) for it to mount into.

Your snippet — requires the script from step 1

useEffect(() => {
  const unmount = window.BookingWidget.mount("#booking-widget", {
    apiBase: "https://your-domain.example",
    publishableKey: "pk_your_key_here",
  });
  return unmount;
}, []);

This is a placeholder key. Log in to get your real snippet →

Did it work?

Run your app and check the container element — the booking widget should render inside it. Open devtools if it doesn't; a missing window.BookingWidget means the script tag hasn't loaded yet.

Pitfalls

Script order: the widget script has to load before the effect that calls mount() runs, or window.BookingWidget will be undefined.
StrictMode double-invoke: return the mount() cleanup function from the effect so double-mounting in dev doesn't leave a stray widget.

See the full React (Vite) guide in the docs hub →

Next.js

~5 min

1Add the widget markup in a Client Component ("use client").
2Load widget.global.js with next/script using strategy="afterInteractive".
3Point data-api-base and data-publishable-key at your own values.
4Render the mount <div> with those data-* attributes — the script auto-mounts it on load.

Your snippet

<Script
  src="https://your-domain.example/widget.global.js"
  strategy="afterInteractive"
/>
<div
  data-booking-widget
  data-api-base="https://your-domain.example"
  data-publishable-key="pk_your_key_here"
/>

This is a placeholder key. Log in to get your real snippet →

Did it work?

Load the page and check the mount <div> — the booking widget should render inside it. Works under static export too, with no server dependency.

Pitfalls

Server components can't mount the widget: the mount markup and any script that touches window must live in a "use client" component.
Script strategy: afterInteractive is right for most pages; if the mount div renders before the script has loaded, the auto-mount picks it up once the script runs.

This is the auto-mount pattern — the least-code path, and the one we recommend. The docs-hub Next.js guide shows the alternative window.BookingWidget.mount() approach (load the script with strategy="beforeInteractive"); both are correct, so pick one.

See the full Next.js guide in the docs hub →