Headless

The styled <BookingCalendar> is one way to use the kit. If you already have your own chrome — a custom frame, your own modal, a specific layout — import the headless layer instead and render the iframe yourself. No CSS, no styling dependencies, just the logic.

import { useBookingUrl, useIframeResize } from "@slotr/react/headless";

The two hooksCopy Anchor Link

• useBookingUrl(props) takes the same booking props (id, theme, accent, lang, …) and returns the src to point an iframe at. It builds the query string for you, so you never assemble URLs by hand.
• useIframeResize() subscribes to the widget's slotr:resize message and returns its reported { height, width }, so your iframe grows to fit its content instead of scrolling inside a fixed box.

ExampleCopy Anchor Link

Your own iframe, sized and pointed by the hooks:

import { useBookingUrl, useIframeResize } from "@slotr/react/headless";

function MyIframe() {
  const { src } = useBookingUrl({ id: DEMO_ID });
  const { height } = useIframeResize();
  return (
    <iframe
      src={src}
      style={{ height, width: "100%", border: 0, minHeight: 500 }}
    />
  );
}

render(<MyIframe />);

The URL contractCopy Anchor Link

@slotr/react/headless also re-exports the framework-agnostic contract from @slotr/booking-embed — buildBookingUrl and the param types — so you can build a booking URL anywhere, even outside React (a server, a Vue app, a plain script).

import { buildBookingUrl } from "@slotr/react/headless";

const src = buildBookingUrl({ id, theme: "dark", lang: "pt-BR" });

This is the same builder the styled component uses internally — one contract, one source of truth.