Booking handoff

Installation

npx shadcn@latest add http://localhost:3000/r/booking-handoff.json

MKT UI is not published yet, so this points at your local development server. Set NEXT_PUBLIC_REGISTRY_URL to the deployed origin to show the public command.

Also installs: container, section, section-heading.

Usage

import { BookingHandoff } from "@/components/booking-handoff";
import { PhoneLink } from "@/components/phone-link";

<BookingHandoff
  eyebrow="Consultation"
  title="Book a 30-minute call"
  description="A short conversation about what you're trying to change. No pitch."
  schedulingUrl="https://cal.com/your-handle/consultation"
  expectations={[
    "30 minutes, video or phone — your choice",
    "We'll ask what you've already tried",
    "A written summary afterwards, whether or not we work together",
  ]}
  alternative={<PhoneLink number="(512) 555-0142" label="Prefer to call?" />}
/>

Props

Prop	Type	Default	Description
title (required)	ReactNode	—	Section heading.
schedulingUrl (required)	string	—	Your scheduler's public link. Cal.com, Calendly, SavvyCal, a Google appointment page — anything with a URL.
actionLabel	ReactNode	"Book a time"	Text of the link.
embed	BookingEmbed	—	`{ src, title, height? }` to render the scheduler inline. `title` is required.
expectations	ReactNode[]	—	What happens after booking. Three or four short lines.
alternative	ReactNode	—	Another way to get in touch, for people who would rather not book.
note	ReactNode	—	Small print, e.g. which timezone times are shown in.
surface	"default" \| "muted" \| "brand" \| "inverted"	"default"	Background treatment.

Why there is no availability picker

MKT UI will not fake a calendar

A calendar that looks like it books an appointment but does not is worse than a plain link. The visitor believes they have a slot, nobody turns up, and the business loses a customer and a reputation. MKT UI has no way to know your real availability, so it links to something that does.

Embedding a scheduler

<BookingHandoff
  title="Book a 30-minute call"
  schedulingUrl="https://cal.com/your-handle/consultation"
  embed={{
    src: "https://cal.com/your-handle/consultation?embed=true",
    title: "Book a consultation with Rivera Consulting",
  }}
/>

The external link renders whether or not an embed is present. An embed blocked by tracking protection or a corporate proxy leaves a visitor staring at an empty rectangle with no other way to book, and that failure is silent.

title on the embed is required rather than optional: an unnamed iframe is announced as "frame", which tells a screen-reader user nothing about what is inside it.

The iframe is loading="lazy", so a third-party scheduler does not block the page it sits on.

Limitations

No provider-specific configuration or theming helpers.
No availability preview, and there will not be one.
Nothing is persisted. Booking data never passes through MKT UI.