Docs · Embed prebuilt UI

Embed prebuilt UI

Add a fully-branded booking flow with zero UI work. Three options, all reading the same live availability: a hosted page, a drop-in script, or native React components. None of them put your API key in the browser.

Option 1 — Hosted page

The fastest path: every published service has a branded, mobile-ready booking page at /{org}/{service}. Just link to it — from a button, an email, a QR code, anywhere.

Link to it

text

https://cadence.abhix-ai.com/movela/consultation

Three taps to a confirmed slot. The page inherits your brand and renders every time in the visitor's timezone. See a live example ↗.

Option 2 — Drop-in widget (widget.js)

Add live booking to any website — no framework required. Drop a container plus the loader script. Inline mounts the booking card and auto-resizes to fit; modal renders a button that opens booking in an overlay.

Inline — mounts the card on the page

html

<div
  data-cadence
  data-org="movela"
  data-service="consultation"
  data-accent="#1f5e45"
></div>
<script src="https://cadence.abhix-ai.com/widget.js" async></script>

Modal — a button that opens an overlay

html

<div
  data-cadence
  data-mode="modal"
  data-label="Book an appointment"
  data-org="movela"
  data-service="consultation"
  data-accent="#1f5e45"
></div>
<script src="https://cadence.abhix-ai.com/widget.js" async></script>

Set data-org and data-service to your slugs; data-accent (a hex color) is optional. Prefer no loader script? Embed the iframe directly:

Iframe — without the loader

html

<iframe
  src="https://cadence.abhix-ai.com/embed/movela/consultation?accent=%231f5e45"
  title="Book an appointment"
  loading="lazy"
  style="width:100%;height:640px;border:0;background:transparent"
></iframe>

The widget renders the same hosted booking flow inside an iframe, calling the keyless public surface — so your ck_… key never touches the page. Generate ready-made snippets (with your real slugs preselected) in the dashboard's Developers panel.

Option 3 — React components (@cadence/react)

Prefer native components over an iframe? @cadence/react renders the booking flow inline with scoped styles (no Tailwind required) and a single accent prop. It calls the keyless public API, so nothing secret touches the browser.

Private beta@cadence/react is in private beta and not yet published to npm, so npm install @cadence/react won't resolve just yet — this is the usage you'll reach for once it's published. Today, the widget and hosted page above give you the same flow with no install. Want early access? Get in touch.

Install

bash

npm install @cadence/react
# react and react-dom are peer dependencies (>=17)

<BookingWidget /> — the full flow (pick a time → details → confirm):

tsx

import { BookingWidget } from "@cadence/react";

export function Booking() {
  return (
    <BookingWidget
      org="movela"             // your Cadence org slug
      service="consultation"   // service id or slug
      accent="#1f5e45"         // your brand color (optional)
      onBooked={(b) => console.log("Confirmed!", b.id)}
    />
  );
}

<AvailabilityCalendar /> — a read-only view of open slots; wire onPickSlot to your own checkout:

tsx

import { AvailabilityCalendar } from "@cadence/react";

<AvailabilityCalendar
  org="movela"
  service="consultation"
  accent="#1f5e45"
  windowDays={7}
  onPickSlot={(slot) => console.log("clicked", slot.start)}
/>;

<ManageBooking /> — let customers view, reschedule, or cancel with the per-booking bmt_… token (no account, no org needed):

tsx

import { ManageBooking } from "@cadence/react";

// e.g. on /manage/[token] — the bmt_… token comes from booking creation.
export function Manage({ token }: { token: string }) {
  return <ManageBooking token={token} accent="#1f5e45" />;
}

These are client components — render them inside a "use client" boundary in the Next.js App Router. The hosted equivalent of ManageBooking already lives at /manage/{token}.

Which should I use?

No code / fastest — link to the hosted page.
Any website — the widget.js script (inline or modal).
A React app, native feel — @cadence/react (private beta).
Fully custom UI — build against the REST API directly.