Prefilling

When you already know who's booking — a logged-in user, a lead from a form — pass their details so they don't retype them. name and phone pre-fill the details step; date and time pre-select a slot and jump straight to it.

Prefill the detailsCopy Anchor Link

import { BookingCalendar } from "@slotr/react/booking-calendar";

function App() {
  return (
    <BookingCalendar
      id={DEMO_ID}
      name="Maria Silva"
      phone="+5511999999999"
      width="auto"
    />
  );
}

The phone is a full international number; the country is detected from its dial code, so +55… selects Brazil automatically.

Deep-link to a slotCopy Anchor Link

Add date (ISO YYYY-MM-DD) and time (HH:mm, 24h) to open the widget on a specific slot's details form. Both are ignored when that slot isn't available — the widget falls back to the calendar.

<BookingCalendar
  id={id}
  date="2026-10-05"
  time="09:00"
  name="Maria Silva"
  phone="+5511999999999"
/>

Use it to turn an email link or a chat message into a one-tap booking.