Embed Modes

The Booking Kit can generate embed snippets for adding booking flows to any website — WordPress, Squarespace, static HTML, or any CMS.

Embed modes

Mode	Description
inline	Renders directly in the page at a specific element
popup	Opens in a modal/overlay triggered by a button
float	Floating action button in the corner of the page

Configuration

import { validateEmbedConfig, type EmbedConfig } from "@thebookingkit/core";

const config: EmbedConfig = {
  mode: "popup",
  eventTypeSlug: "30-min-consultation",
  providerSlug: "dr-smith",
  baseUrl: "https://booking.example.com",
  branding: {
    primaryColor: "#2563eb",
    buttonText: "Book Now",
    hideHeader: false,
  },
};

validateEmbedConfig(config);
// Throws EmbedConfigError if invalid

Snippet generation

import { generateEmbedSnippet, generateAllSnippets, buildEmbedUrl } from "@thebookingkit/core";

// Generate a snippet for a specific mode
const snippet = generateEmbedSnippet(config);
// Returns: EmbedSnippet { html, script }

// Generate snippets for all three modes
const all = generateAllSnippets(config);
// Returns: { inline: EmbedSnippet, popup: EmbedSnippet, float: EmbedSnippet }

// Build just the embed URL
const url = buildEmbedUrl(config);
// "https://booking.example.com/embed/dr-smith/30-min-consultation?color=2563eb"

Example output (popup mode)

<button onclick="TheBookingKit.open()">Book Now</button>
<script src="https://booking.example.com/embed.js"
  data-thebookingkit-event="30-min-consultation"
  data-thebookingkit-provider="dr-smith"
  data-thebookingkit-mode="popup"
  data-thebookingkit-color="#2563eb">
</script>

UI component

The <EmbedConfigurator /> component lets providers generate embed code with a live preview:

import { EmbedConfigurator } from "./components/embed-configurator";

<EmbedConfigurator
  eventTypes={eventTypes}
  baseUrl="https://booking.example.com"
  onSnippetGenerated={(snippet) => copyToClipboard(snippet.html)}
/>