> ## 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 the Booking Widget

> Drop the Hiveku booking widget into any website

The Hiveku booking widget puts your scheduler directly on your website — no redirect, no extra page load. Visitors pick a slot and book without leaving the page they were already on.

Three embed modes are available: **inline iframe**, **button popup**, and **full-page link**. Get the snippet from the **Embed** tab in `/dashboard/calendar/`.

## Embed modes

<Tabs>
  <Tab title="Inline iframe">
    The booking flow renders directly inside a container on your page — no popup, no overlay. Best for dedicated booking pages and pricing pages.

    ```html theme={null}
    <div
      data-hiveku-booking
      data-meeting-type="30-min-demo"
      data-theme="light"
      style="width: 100%; min-height: 700px;">
    </div>
    <script src="https://widget.hiveku.com/booking.js" async></script>
    ```
  </Tab>

  <Tab title="Button popup">
    A "Book a meeting" button. Click pops up a centered modal with the booking flow. Best for landing page CTAs and homepage heroes.

    ```html theme={null}
    <button
      data-hiveku-booking-popup
      data-meeting-type="30-min-demo"
      data-button-color="#0066ff">
      Book a 30-min demo
    </button>
    <script src="https://widget.hiveku.com/booking.js" async></script>
    ```
  </Tab>

  <Tab title="Full-page link">
    No JavaScript at all — just a link to your hosted booking page. Best for email signatures, social bios, and any context where you can't run scripts.

    ```html theme={null}
    <a href="https://book.hiveku.com/acme/30-min-demo">Schedule a demo</a>
    ```

    Works in Gmail signatures, Slack, LinkedIn DMs, anywhere a URL works.
  </Tab>
</Tabs>

## Customization

The widget reads `data-*` attributes for styling. Defaults match a clean light theme; override anything you need.

<ResponseField name="data-meeting-type" type="string" required>
  The slug of the meeting type to book — e.g., `30-min-demo`, `intro-call`. Find this on each meeting type's detail page.
</ResponseField>

<ResponseField name="data-theme" type="light | dark | auto">
  `auto` follows the user's system preference. Default `light`.
</ResponseField>

<ResponseField name="data-primary-color" type="string">
  Hex color for buttons and selection state. Default uses your account brand color from Settings > Branding.
</ResponseField>

<ResponseField name="data-font" type="string">
  Optional font family override. The widget inherits your page's font by default.
</ResponseField>

<ResponseField name="data-prefill-email" type="string">
  Pre-fill the booker's email — useful when they're already logged into your app.
</ResponseField>

<ResponseField name="data-prefill-name" type="string">
  Pre-fill the booker's name.
</ResponseField>

<ResponseField name="data-utm-source" type="string">
  UTM tag stored on the booking record for analytics.
</ResponseField>

## Embed inside a Hiveku project

If your site is built with [Hiveku Editor](/editor/overview), the booking widget is a first-class block — no script tag, no copy-paste.

<Steps>
  <Step title="Open the page in Editor">
    Go to your Hiveku project and open the page where you want the booking widget.
  </Step>

  <Step title="Add a Booking block">
    From the block library, drag in **Booking Widget**. It's under "Forms & Conversion".
  </Step>

  <Step title="Pick a meeting type">
    Use the right-side panel to pick which meeting type the widget books. Style with the same controls you use for any other block.
  </Step>

  <Step title="Publish">
    The widget is live the moment you publish the page. Conversion lands automatically in your CRM.
  </Step>
</Steps>

For a deeper walkthrough see [Embed Bookings on Your Hiveku Site](/how-tos/embed-booking-on-site).

## Embed on external sites

The script tag works on any site that allows custom HTML — WordPress, Webflow, Shopify, Framer, Squarespace, raw HTML, React/Vue/etc.

<Tabs>
  <Tab title="WordPress">
    Use a Custom HTML block. Paste the inline iframe snippet. The widget loads on page render.
  </Tab>

  <Tab title="Webflow">
    Add an Embed element in Webflow Designer. Paste the snippet. Note: Webflow's free plan limits Embed elements per page.
  </Tab>

  <Tab title="Shopify">
    Add a Custom Liquid section to a page or template. Paste the snippet. The widget works on product pages, the homepage, and dedicated booking pages.
  </Tab>

  <Tab title="React / Next.js">
    Render the `<div data-hiveku-booking>` and load the script with `<Script src="..." strategy="afterInteractive" />` in Next.js, or `useEffect` to inject in a plain React app.
  </Tab>
</Tabs>

## Performance

The widget script is \~24 KB gzipped, served from a global CDN, and loads asynchronously. It does not block your page's first paint or LCP. If you want to defer loading entirely until interaction, use the **button popup** mode — the iframe contents only fetch when the user clicks.

<Tip>
  For maximum performance on a static landing page, use the **full-page link** mode. Zero JS, instant render, conversion still tracks via UTM.
</Tip>

## CORS and CSP

The widget runs in a sandboxed iframe served from `widget.hiveku.com`. If you have a strict Content Security Policy (CSP), allow:

```
frame-src https://widget.hiveku.com https://book.hiveku.com;
script-src https://widget.hiveku.com;
```

## Tracking and conversions

Every booking made through an embed records:

* **UTM tags** — passed via `data-utm-source`, `data-utm-medium`, `data-utm-campaign`
* **Referrer** — the page URL the widget was loaded on
* **Embed mode** — inline, popup, or full-page

Build conversion reports in Analytics, or pipe events to Google Analytics with a small wrapper:

```html theme={null}
<script>
  window.addEventListener("hiveku:booking-confirmed", (e) => {
    gtag("event", "booking_confirmed", {
      meeting_type: e.detail.meetingType,
      booking_id: e.detail.bookingId,
    });
  });
</script>
```

The widget emits `hiveku:booking-confirmed`, `hiveku:slot-selected`, and `hiveku:closed` events for any analytics integration.

## Troubleshooting

<AccordionGroup>
  <Accordion title="The iframe is too short and I'm getting scrollbars">
    Set `min-height: 700px` (default) on the container, or remove the height constraint entirely and let the widget auto-size with `data-auto-resize="true"`.
  </Accordion>

  <Accordion title="Custom colors aren't applying">
    Use full hex codes (`#0066ff`, not `#06f`). Some hosts strip CSS variables from inline `data-*` attributes.
  </Accordion>

  <Accordion title="The popup is blocked by my site's overlay">
    The button popup uses a `z-index` of 999999 by default. If your site has a higher z-index, set `data-popup-z-index="1000000"` or higher.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Embed on a Hiveku site" icon="rocket" href="/how-tos/embed-booking-on-site">
    Step-by-step guide for Hiveku-hosted projects.
  </Card>

  <Card title="Customize your booking page" icon="palette" href="/calendar/overview#public-page">
    Brand the public booking page itself.
  </Card>
</CardGroup>