Embed the widget on your site

Live today: an availability checker only. Paste the snippet below and your site shows a real, live 7-day availability strip for one resource. It does not yet get a price, take a hold, verify a guest, or take payment — for a full booking today, use the API directly from your server instead. This page will grow as the widget does; it will not quietly start claiming more than it does.

The snippet

<script async src="https://widget.<domain>/v1.js"></script>
<div
  data-booking-widget
  data-key="pk_live_..."
  data-resource="<RESOURCE_ID>"
></div>

Both lines are required. v1.js finds every [data-booking-widget] element on the page and mounts one widget into each, inside a Shadow DOM — the host page’s CSS can’t leak in, and the widget’s CSS can’t leak out. This works the same inside WordPress, Wix, or hand-rolled HTML.

• data-key — your pk_live_… or pk_test_… key. Required. A missing or malformed key (wrong prefix, empty) replaces the element with a plain “Booking widget misconfigured — see console” message, visible only to whoever’s building the page, never a guest.
• data-resource — one resource’s ID. Required. A resource picker (data-resource="all") is not built yet — if you have several bookable resources, embed one widget per resource id, on separate parts of the page, until a picker ships.
• data-lang — en or id. Optional, defaults to en.

What it shows

A 7-day strip (not a full month calendar — that needs the calendar API, API-012, which hasn’t shipped) with a guest count field and previous/next week buttons. Each day is marked available, unavailable, or unknown.

Theme it

Five options, all as data-* attributes on the same element. Anything outside these bounds falls back to a safe default — never a broken layout — and logs a console warning for you to see, never the guest.

Attribute	Values	What happens if it’s invalid
data-accent	A 6-digit hex color, e.g. #2563eb	Falls back to the default accent
data-radius	A number (pixels), clamped to 2–16	Out-of-range values are clamped, not rejected
data-font	system, serif, or mono	Falls back to system
data-density	comfortable or compact	Falls back to comfortable

The text color drawn on top of your accent color is always computed automatically for readable contrast — there’s no attribute for it, and none is planned. You pick the accent; we make sure the text on it is legible.

These five options are a fixed, closed set. There’s no free-text font field and no way to change spacing, component shape, or the booking-flow order — that’s deliberate, not a current limitation.

The publishable key and the domain allowlist

data-key must be a pk_ key — never a secret key; the widget only ever holds a publishable key, and there’s no code path in it that could send a secret one anywhere. Your operator contact issues pk_ keys with an allowlist of the domains they’re allowed to run on. If the widget’s request comes from a domain not on that list, the API rejects it, and the widget falls back to its outage message (below) — check the allowlist first if the widget looks “down” only on one domain.

Honest failure behavior

Two different things can go wrong, and the widget treats them differently on purpose:

• A bad snippet (missing/malformed key, data-resource="all", a missing resource id) is a mistake in your page, not a guest-facing outage. The element is replaced with plain, unstyled text pointing you at the browser console. This is for you, not your guests.
• A working snippet that can’t reach the API (network failure, rejected key, rate limit) never renders an empty calendar that could look like “no availability” — that would be a silent loss of bookings with no signal anyone could act on. If every visible day fails, the whole strip is replaced with a “Booking temporarily unavailable” message, plus your contact details if you set data-fallback-contact to a tel:, mailto:, or WhatsApp link. If only some days fail, the ones that succeeded still show real data, and the failed ones show as “unknown” rather than joining either bucket.

Plain HTML

Paste both lines wherever you want the calendar to appear — anywhere inside <body>, most naturally right where a guest would expect to see dates.

WordPress

Add a Custom HTML block (in the block editor) or a code-snippet plugin, and paste the exact two lines — don’t split them across two blocks. Many WordPress themes apply global font and color rules to every element on the page; the widget’s Shadow DOM and internal reset stop those from reaching inside it, so it renders the same regardless of your theme.

What’s next

• Quickstart — the full hold → verify → confirm flow, available today from your own server.
• Quote, hold, guest verification, and payment inside the widget itself are planned (WID-002, WID-003) but not built. This page will be rewritten against the real snippet the day each one ships, not before.