Embed reference

For a guided installation without code details, see Put booking on your website. Use the dashboard's Embed panel as the source for your current published snippet and installation prompt.

Script and Web Component

<booking-embed
  src="https://book.calberry.ai/your-workspace/your-link"
  lang="en"
></booking-embed>
<script type="module" src="https://book.calberry.ai/assets/embed.js"></script>

Replace the example src with the published link copied from Calberry. Keep the module on the same booking origin. The component validates the origin and workspace/link path. Load the script once per page; it defines <booking-embed> and renders in a shadow root without an iframe of its own.

Give the containing block enough width and allow automatic height. Form/calendar layout responds to container width. The script and fonts must be allowed by your website's content security policy.

There is no separate npm React package currently provided. React/Next.js sites can load the same module in the browser and render the custom element; do not recreate the booking engine or submit a second booking on confirmation.

Headless prefill with your own form

The current headless calendar reads the leadId and leadToken query parameters from src, using that exact casing. A lead ID on its own is insufficient.

1. Set the Funnel to Prefill / API and collect its configured required fields in your form.
2. On your server, call the documented lead-creation operation with your private API key and an idempotency key. It returns leadId, leadToken and validation warnings. API access requires Pro.
3. Use URL and searchParams.set() to put the returned values into the published booking URL, then set that URL as the embed's src.
4. Let the component load the lead and calendar and complete the booking. Handle missing/invalid prefill instead of displaying an unrelated user's data.

Treat leadToken as a bearer credential for that lead. Do not hardcode a personal token in a shared snippet or log it. Never substitute a private workspace API key. Keep raw personal information out of query parameters.

Name and email remain required; phone follows the Funnel setting. The follow-up consent flag is required by the API; false is valid. Headless stores it as false and does not create abandoned-lead timeouts. Preserve attribution, required answers, idempotency and booking action links in a fully custom API UI. Use the generated endpoint contracts for the exact requests.

Current communication information

For a headless form, fetch the anonymous communication URL named in the generated installation prompt before showing the form. If whatsappReminder=true, render the provided reminder notice and coachName as text under the phone field, without adding a checkbox. Use “You will receive appointment reminders via WhatsApp from ” followed by coachName in English, or “Terminerinnerungen erhältst du per WhatsApp von ” followed by coachName in German. Refresh on a new form display. The managed Calberry form handles its own notice. This contract does not imply WhatsApp is activatable now; WhatsApp is coming soon.

WordPress, Webflow and Framer

Use an HTML/code block that retains module scripts. Check the published website, since editors can suppress scripts in previews. In WordPress, choose a wide block for two columns. In Webflow, publish the embed before testing.

Framer wraps HTML embeds in a frame. Set sufficient frame height at desktop and mobile breakpoints. Parent-page tracking requires the supported direct same-origin srcdoc context; opaque or cross-origin frames do not forward events to the parent. Connect the actual banner decision to the child embed. Waiting for the custom element in the parent window does not wait for the child.

See Tracking events and consent and the existing vendor-specific tracking recipes.

Testing and diagnosis

A normal embed always books real appointments. Adding sandbox to its URL does not enable test mode. Use the separate test-booking page generated by the dashboard for sandbox checks; verify it under Meetings → Test bookings.

If the component is blank, check script loading, the published src, origin, HTML sanitization and container/frame dimensions. If it loads without slots, check availability. Analytics being gated by consent is separate from booking functionality.