Embed the Booking Widget

For a step-by-step walkthrough with screenshots of the link, tracked links and the QR code, see Share Your Booking Link and QR Code.

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

Inline iframe
Button popup
Full-page link

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>

A “Book a meeting” button. Click pops up a centered modal with the booking flow. Best for landing page CTAs and homepage heroes.

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

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.

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

Customization

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

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.

light | dark | auto

auto follows the user’s system preference. Default light.

string

Hex color for buttons and selection state. Default uses your account brand color from Settings > Branding.

string

Optional font family override. The widget inherits your page’s font by default.

string

Pre-fill the booker’s email — useful when they’re already logged into your app.

string

Pre-fill the booker’s name.

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.

Open the page in Editor

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

Add a Booking block

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

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.

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.

WordPress
Webflow
Shopify
React / Next.js

Use a Custom HTML block. Paste the inline iframe snippet. The widget loads on page render.

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.

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

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

Custom colors aren't applying

Use full hex codes (#0066ff, not #06f). Some hosts strip CSS variables from inline data-* attributes.

Get Started

Dashboards

AI Assistant

Code Editor

Design Studio

CMS

Email Marketing

Social Media

Advertising

Marketing Delivery

Commerce

Calendar

Communications

Helpdesk

Sales

Publishing

Native Mobile

Email

Integrations

How-Tos

Account & Settings

Partners

Embed modes

Customization

Embed inside a Hiveku project

Embed on external sites

Performance

CORS and CSP

Tracking and conversions

Troubleshooting

Next steps

Embed on a Hiveku site

Customize your booking page

​Embed modes

​Customization

​Embed inside a Hiveku project

​Embed on external sites

​Performance

​CORS and CSP

​Tracking and conversions

​Troubleshooting

​Next steps

Embed on a Hiveku site

Customize your booking page

Embed modes

Customization

Embed inside a Hiveku project

Embed on external sites

Performance

CORS and CSP

Tracking and conversions

Troubleshooting

Next steps