Embedding Guide

Method 1: iframe Embed (Recommended)

Best for: Dedicated booking pages, sites with plenty of vertical space, simple implementation, WordPress, Wix, Squarespace, and other CMS platforms.

How It Works

The widget loads directly on the page in an iframe. Customers can see the full booking interface immediately.

Installation Steps

1. Go to Widget → Code in your dashboard
2. Select the "iframe (Recommended)" tab
3. Click "Copy Code"
4. Paste the code into your website's HTML where you want the widget to appear
5. (Optional) Adjust the height using the data-height attribute if needed for your layout

Method 2: Button Trigger

Best for: Sites where you want to preserve existing layout, adding booking to multiple pages via a button, mobile-optimized booking experience, similar UX to Calendly or OpenTable.

How It Works

A button appears on your page. When clicked, the widget opens in a slide-out panel from the right side of the screen. The widget loads only when needed (faster page load).

Features

• Smooth slide-out animation
• Click overlay to close
• Press ESC key to close
• Full width on mobile devices
• Button styled with your widget colors automatically

Installation Steps

1. Go to Widget → Code in your dashboard
2. Select the "Button Trigger" tab
3. Click "Copy Code"
4. Paste the code into your website's HTML (typically before the closing </body> tag)
5. The button will appear styled with your widget colors

Multiple Buttons

You can add multiple booking buttons on the same page. Each button works independently with its own slide-out panel. Add multiple div elements with different settings — only include the script tag once.

<!-- Button 1: Haircut -->
<div data-bookerkit-widget="your-account"
     data-mode="button"
     data-button-text="Book Haircut">
</div>

<!-- Button 2: Massage -->
<div data-bookerkit-widget="your-account"
     data-mode="button"
     data-button-text="Book Massage"
     data-background-color="#10b981">
</div>

<!-- Only include the script once -->
<script src="https://www.bookerkit.com/embed.js" defer></script>

Method 3: Custom Trigger Element

Best for: Developers who want full control over the trigger button styling, using existing design systems, or integrating with frameworks like React, Vue, or Tailwind CSS.

How It Works

Instead of using the default styled button, you can place your own HTML element inside the container. The embed script will detect your custom element and use it as the trigger, giving you complete styling control.

Basic Example

<!-- Custom button trigger -->
<div data-bookerkit-widget="your-account" data-mode="button">
  <button class="my-custom-button">
    Book Appointment
  </button>
</div>
<script src="https://www.bookerkit.com/embed.js" defer></script>

Supported Elements

Any clickable element can be used as a trigger:

• <button> — Standard button element
• <a> — Link styled as a button
• <div> — Custom styled container
• <span> — Inline trigger element
• Any other HTML element with your own styling

Tailwind CSS Example

<!-- Tailwind styled button -->
<div data-bookerkit-widget="your-account" data-mode="button">
  <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition-colors">
    Schedule Now
  </button>
</div>

Link Styled Trigger

<!-- Link trigger -->
<div data-bookerkit-widget="your-account" data-mode="button">
  <a href="#" class="text-blue-600 underline hover:text-blue-800">
    Click here to book →
  </a>
</div>

Data Attributes Reference

Customize the embed behavior using data attributes on the container element. These override your default widget settings per-embed.

<!-- Promo landing page with pre-selected service -->
<div data-bookerkit-widget="your-account"
     data-mode="button"
     data-button-text="Claim Offer"
     data-service-id="your-service-uuid"
     data-promo-title="dysport-guest"
     data-promo-description="$4/unit">
</div>

Programmatic Control

Open and close widgets from your own JavaScript code. Useful for custom navigation, single-page apps, or triggering the widget from non-standard UI elements.

// Shortcut: open/close the first widget on the page
window.openBookerKitWidget()
window.closeBookerKitWidget()

// Access a specific widget by instance ID
window.bookerkitWidgets[1].open()
window.bookerkitWidgets[1].close()

// Access via the container element
document.querySelector('[data-bookerkit-widget]').bookerkitWidget.open()

The data-bookerkit-ready attribute is added to each container element when initialization is complete. You can listen for this before calling programmatic methods.

UTM Parameters

The widget automatically captures UTM parameters from your page URL for marketing attribution. If a customer lands on your site via a Google Ad or Facebook campaign, those parameters will be tracked with the booking session.

Supported Parameters:

• utm_source (e.g., google, facebook)
• utm_medium (e.g., cpc, social)
• utm_campaign (e.g., summer-promo)
• utm_term (keywords)
• utm_content (ad variation)

In addition to UTM parameters, the widget captures ad platform click IDs (gclid, fbclid, msclkid) automatically. All tracking data is included in webhook payloads and stored with the booking session. See the Analytics & Session Tracking section for the full list of captured data.