> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Bookings on Your Hiveku Site

> Add the booking widget to a Hiveku page in three modes

This guide shows how to drop the booking widget into a Hiveku-hosted project — your homepage, a "Book a demo" landing page, or anywhere else. Three modes are covered: inline iframe, button popup, and full-page link.

For embedding on **non-Hiveku** sites (WordPress, Webflow, Shopify, custom HTML, React/Vue), see the [embed widget docs](/calendar/embed-booking-widget) — the snippet works anywhere.

## Before you start

You should already have:

* A booking page set up — see [Set Up Your Booking Page](/how-tos/setup-booking-page)
* At least one published meeting type
* A Hiveku project where you want the widget

## Pick a mode

<Tabs>
  <Tab title="Inline">
    The booking flow renders directly inside a section of the page. No popup, no modal. Best for dedicated booking pages and pricing pages where the call-to-action is "book a meeting".
  </Tab>

  <Tab title="Button popup">
    A "Book a meeting" button. Click pops up a centered modal. Best for landing-page heroes and marketing pages where the page has other goals besides booking.
  </Tab>

  <Tab title="Full-page link">
    A regular link that goes to your hosted booking page. Zero JS, instant. Best for footers, "contact us" pages, and email signatures.
  </Tab>
</Tabs>

## Add the inline booking widget

<Steps>
  <Step title="Open the Editor">
    Go to your project, open the page where you want the booking flow.
  </Step>

  <Step title="Drag in the Booking block">
    From the block library (left sidebar), search for **Booking Widget**. It's under "Forms & Conversion".
  </Step>

  <Step title="Position the block">
    Drop it where you want — inside a Section, Container, or Grid. The widget is responsive and fills its container.
  </Step>

  <Step title="Pick a meeting type">
    In the right-side properties panel, pick from the meeting types on your account. The widget will only book this type. Use multiple Booking blocks on the same page for different types.
  </Step>

  <Step title="Style it">
    Override accent color, border radius, and background. Defaults pull from your project's theme.
  </Step>

  <Step title="Set min height">
    Default 700 px. Increase for long meeting types (more intake questions = more height).
  </Step>

  <Step title="Publish">
    Save and publish the page. The widget is live on your domain.
  </Step>
</Steps>

## Add the button popup

<Steps>
  <Step title="Drag in a Button block">
    Standard Button block from the block library.
  </Step>

  <Step title="Set the action to 'Open booking'">
    In the Button properties panel, set Action to **Open Booking Widget** instead of "Link to URL".
  </Step>

  <Step title="Pick a meeting type">
    Pick which type the popup books.
  </Step>

  <Step title="Style the button">
    Standard button styling — text, color, size, icon, alignment.
  </Step>

  <Step title="Publish">
    Click the button to confirm the popup opens. Booker can dismiss with Esc or close button.
  </Step>
</Steps>

<Tip>
  Place a popup button in your hero CTA, then again in your final-call-to-action section near the page bottom. Two clear conversion points without cluttering the middle of the page.
</Tip>

## Add the full-page link

The simplest option — no special block.

<Steps>
  <Step title="Drag in a Link block">
    Or use a Button block with action "Link to URL".
  </Step>

  <Step title="Set the URL">
    Use either:

    * `https://book.hiveku.com/your-slug` — your booking page root (lets the booker pick from all meeting types)
    * `https://book.hiveku.com/your-slug/30-min-demo` — direct link to one meeting type
  </Step>

  <Step title="Style and publish">
    Standard link styling. Opens in a new tab is recommended so users can come back to your site.
  </Step>
</Steps>

## Customization shared by all modes

| Property       | What it controls                            |
| -------------- | ------------------------------------------- |
| Accent color   | Buttons, slot selection state               |
| Theme          | Light, dark, or auto (follows system)       |
| Border radius  | Roundness of the widget container           |
| Pre-fill name  | Useful when the visitor is logged in        |
| Pre-fill email | Same                                        |
| UTM tags       | Tracked on the booking record for analytics |

UTM tags are the easiest way to attribute conversions. Set `data-utm-source="homepage"` on the inline widget on your homepage, `data-utm-source="pricing"` on your pricing page, and so on. Then filter bookings by source in the **Analytics** tab.

## Tracking conversions

The widget emits browser events you can hook into:

* `hiveku:slot-selected` — booker picked a time
* `hiveku:booking-confirmed` — booking was successful
* `hiveku:closed` — popup was dismissed

```html theme={null}
<!-- in a Hiveku page Custom Code block -->
<script>
  window.addEventListener("hiveku:booking-confirmed", (e) => {
    if (window.gtag) {
      gtag("event", "booking", {
        event_category: "conversion",
        meeting_type: e.detail.meetingType,
        value: 1
      });
    }
  });
</script>
```

## Performance

The widget is lazy-loaded — it doesn't fetch its iframe contents until the booker reaches the section (inline mode) or clicks the button (popup mode). Page LCP and Core Web Vitals are not impacted. If you want zero JS at all, use the full-page link mode.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Widget shows 'unable to load'">
    Most often this means the meeting type slug is wrong (renamed but the block still references the old slug) or the meeting type is unpublished. Open the meeting type in `/dashboard/calendar/` and confirm it's active.
  </Accordion>

  <Accordion title="Popup closes when I click outside">
    That's the default behavior. To disable, set the Button block's "Allow click-outside dismiss" to off.
  </Accordion>

  <Accordion title="Widget colors don't match my site">
    Set the accent color in the block properties, not just in your global theme. The widget runs in an iframe and only inherits the explicit overrides.
  </Accordion>

  <Accordion title="Widget loads slowly on first paint">
    Use the full-page link or button popup instead of inline. Inline mode loads the iframe immediately when its section enters the viewport.
  </Accordion>
</AccordionGroup>

## Multiple widgets per page

You can put many booking widgets on a single page — for example, a "Book a demo" inline widget at the top and a "Book a strategy call" inline widget at the bottom. Each widget is independent; bookings made through one don't affect the other's state.

For a "tab switcher" effect (one section, multiple meeting types selectable via tabs), use the parent booking page link instead — `book.hiveku.com/your-slug` — which already shows all your active meeting types.

## Next steps

<CardGroup cols={2}>
  <Card title="Embed widget reference" icon="code" href="/calendar/embed-booking-widget">
    Full reference for embedding on any site, not just Hiveku.
  </Card>

  <Card title="Calendar automations" icon="bolt" href="/calendar/automations">
    Reminders and follow-ups for every booking.
  </Card>
</CardGroup>