PASTE Embed

Two lines on the site you already have.

No plugin to install, no build step, and nothing to keep updated. Paste it once and the booking page improves underneath it.

<script
  src="https://book.voltsbook.com/voltsbook-widget.js"
  data-tenant="your-slug"></script>

THAT IS THE WHOLE THING. EVERYTHING BELOW IS OPTIONAL.

Why it is an iframe

Because your site’s CSS must not be able to break the booking form, and the booking form must not be able to touch your site. An inline mount makes that a permanent fight against every reset and every button { } rule on the internet.

A document boundary gives total isolation in both directions for free. The one real cost is height, and the widget measures itself and reports it back, so the frame grows and shrinks with the step the customer is on.

OPTIONS Everything it reads

Nine attributes, one required.

data-tenant Required your-slug: Which business to show. It is the name in your own booking-page address, and the only attribute the snippet insists on.
data-service optional <service id>: Open on one service, already chosen. Useful when the button sits on that service’s own page.
data-staff optional <staff id>: Open on one person. A team page can give everybody their own button.
data-location optional <location id>: Open on one location, for a business with more than one address.
data-appearance optional dark: A named appearance you have set up. An appearance that no longer exists falls back to your default rather than erroring — this HTML often gets pasted once and never revisited.
data-flow optional what-do-you-need: Open a front-door wizard instead of the service list, for when the customer does not yet know what to ask for.
data-mode optional inline | popup: Inline sits in the page where the script is. Popup renders a button that opens the widget over the page. Inline is the default.
data-label optional Book now: The popup button’s text. Ignored inline.
data-height optional 720: A starting height in pixels. The widget measures itself and reports its real height back, so this only governs the first paint.

SHAPES Three ways it is used

Copy the one nearest yours.

A booking page of its own

The whole widget, in a page called Book.

<script
  src="https://book.voltsbook.com/voltsbook-widget.js"
  data-tenant="your-slug"></script>

A button on a service page

Opens over the page, already on that service.

<script
  src="https://book.voltsbook.com/voltsbook-widget.js"
  data-tenant="your-slug"
  data-service="<service id>"
  data-mode="popup"
  data-label="Book this"></script>

One button per person

On a team page, beside each photograph.

<script
  src="https://book.voltsbook.com/voltsbook-widget.js"
  data-tenant="your-slug"
  data-staff="<staff id>"
  data-mode="popup"
  data-label="Book with Ada"></script>

WHERE Putting it somewhere

Where the paste goes.

WordPress

Add a Custom HTML block and paste the snippet. Do not use the visual editor — it strips script tags. On a page builder, use its own HTML or Embed element.

Squarespace / Wix

Insert an Embed or Custom Code block and paste it. Both preview the page in an editor that blocks scripts; view the published page to check it.

Webflow / Framer

Drop an Embed element where the widget should sit. Publish before testing — neither renders third-party scripts in the canvas.

Anything hand-written

Paste it into the HTML where you want the widget. No build step, no framework, and it touches no globals it does not own.

No website at all? Every business gets a hosted booking page at its own address, ready to share — nothing to embed it into required. Or use the free website that comes with the account.