Inline embed

An inline embed renders your booking page inside an element on your own site. The guest picks a time and confirms without leaving.

Adding it

Add a container and the widget script:

<div id="bunnycal" data-bunnycal="acme/intro-call"></div>

<script async src="https://bunnycal.io/widget.js"></script>

The data-bunnycal value is <handle>/<event-slug> — the same pair as your public booking URL. The script scans for [data-bunnycal] on load and mounts into each one, so several embeds can share one script tag.

Sizing

The embed reports its height to the parent page and resizes as the guest moves between steps, so you don’t need a fixed height. Give the container a width and let the height follow:

#bunnycal { width: 100%; max-width: 720px; margin: 0 auto; }

Setting a fixed height on the container, or overflow: hidden on an ancestor, will clip the confirmation step — that’s the usual cause of a cut-off embed.

Prefilling

Skip questions you already know the answer to:

<div
  data-bunnycal="acme/intro-call"
  data-name="Ada Lovelace"
  data-email="ada@example.com"
  data-a1="Analytical Engine rollout"
></div>

data-a1, data-a2, … map to your custom booking questions in the order they appear on the event type. Prefilled fields stay editable.

Theming

The embed inherits nothing from your page by default. Match your brand with:

<div
  data-bunnycal="acme/intro-call"
  data-accent="#8C74B8"
  data-theme="light"
></div>

data-theme accepts light, dark, or auto (follows the guest’s system preference).

Programmatic mounting

For single-page apps where the container appears after load, mount manually:

BunnyCal.inline({
  target: document.querySelector("#bunnycal"),
  link: "acme/intro-call",
  prefill: { name: "Ada Lovelace", email: "ada@example.com" },
});

Content Security Policy

If your site sets a CSP, allow:

script-src  https://bunnycal.io
frame-src   https://bunnycal.io