Skip to main content
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

The booking flow renders directly inside a container on your page — no popup, no overlay. Best for dedicated booking pages and pricing pages.
<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>

​
Customization

The widget reads data-* attributes for styling. Defaults match a clean light theme; override anything you need.
​
data-meeting-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.
​
data-theme
light | dark | auto
auto follows the user’s system preference. Default light.
​
data-primary-color
string
Hex color for buttons and selection state. Default uses your account brand color from Settings > Branding.
​
data-font
string
Optional font family override. The widget inherits your page’s font by default.
​
data-prefill-email
string
Pre-fill the booker’s email — useful when they’re already logged into your app.
​
data-prefill-name
string
Pre-fill the booker’s name.
​
data-utm-source
string
UTM tag stored on the booking record for analytics.

​
Embed inside a Hiveku project

If your site is built with Hiveku Editor, the booking widget is a first-class block — no script tag, no copy-paste.
1

Open the page in Editor

Go to your Hiveku project and open the page where you want the booking widget.
2

Add a Booking block

From the block library, drag in Booking Widget. It’s under “Forms & Conversion”.
3

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

Publish

The widget is live the moment you publish the page. Conversion lands automatically in your CRM.
For a deeper walkthrough see Embed Bookings on Your Hiveku 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.
Use a Custom HTML block. Paste the inline iframe snippet. The widget loads on page render.

​
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.
For maximum performance on a static landing page, use the full-page link mode. Zero JS, instant render, conversion still tracks via UTM.

​
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: 
<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

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".
Use full hex codes (#0066ff, not #06f). Some hosts strip CSS variables from inline data-* attributes.
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.

​
Next steps

Embed on a Hiveku site

Step-by-step guide for Hiveku-hosted projects.

Customize your booking page

Brand the public booking page itself.