Skip to main content
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 — the snippet works anywhere.

​
Before you start

You should already have:
  • A booking page set up — see Set Up Your Booking Page
  • At least one published meeting type
  • A Hiveku project where you want the widget

​
Pick a mode

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”.

​
Add the inline booking widget

1

Open the Editor

Go to your project, open the page where you want the booking flow.
2

Drag in the Booking block

From the block library (left sidebar), search for Booking Widget. It’s under “Forms & Conversion”.
3

Position the block

Drop it where you want — inside a Section, Container, or Grid. The widget is responsive and fills its container.
4

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.
5

Style it

Override accent color, border radius, and background. Defaults pull from your project’s theme.
6

Set min height

Default 700 px. Increase for long meeting types (more intake questions = more height).
7

Publish

Save and publish the page. The widget is live on your domain.

​
Add the button popup

1

Drag in a Button block

Standard Button block from the block library.
2

Set the action to 'Open booking'

In the Button properties panel, set Action to Open Booking Widget instead of “Link to URL”.
3

Pick a meeting type

Pick which type the popup books.
4

Style the button

Standard button styling — text, color, size, icon, alignment.
5

Publish

Click the button to confirm the popup opens. Booker can dismiss with Esc or close button.
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.

​
Add the full-page link

The simplest option — no special block.
1

Drag in a Link block

Or use a Button block with action “Link to URL”.
2

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
3

Style and publish

Standard link styling. Opens in a new tab is recommended so users can come back to your site.

​
Customization shared by all modes

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

​
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

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.
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.
Use the full-page link or button popup instead of inline. Inline mode loads the iframe immediately when its section enters the viewport.

​
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

Embed widget reference

Full reference for embedding on any site, not just Hiveku.

Calendar automations

Reminders and follow-ups for every booking.