Embed a Booking Widget on Your Website: The Complete Guide

Embedding a booking widget directly on your website lets visitors schedule appointments without leaving the page they are on. This eliminates the redirect friction that causes 40-60% of potential bookings to drop off. Whether you run WordPress, Shopify, Squarespace, or a custom-built site, this guide covers every embed method from setup to optimization.

Short Answer

A booking widget is a piece of code you add to your website that renders an interactive scheduling calendar. Visitors select a service, choose an available time slot, and confirm their booking without navigating away from your site. The widget syncs with your calendar in real time, detects the visitor's timezone automatically, and works on all devices.

How It Works

The embedding process follows three steps regardless of which platform you use:

1. Copy the embed code from your SchedulingKit dashboard -- a lightweight HTML snippet under 30KB gzipped.
2. Paste it into your website in the location where you want the booking experience to appear.
3. Visitors book on your page -- the widget renders the full scheduling flow with real-time availability, timezone detection, and mobile responsiveness.

Bookings land in your calendar instantly, and visitors receive confirmation via email or SMS.

Choosing the Right Embed Type

There are three primary embed approaches. The right choice depends on where and how you want booking to appear.

Inline Embed

The inline embed renders the full scheduling calendar directly within your page content. It occupies a defined area on the page and is visible as soon as the visitor scrolls to that section.

Best for: Service pages, pricing pages, and landing pages where booking is the primary call-to-action.

How it looks: A calendar with available time slots appears inline with your content, matching your site's width and adapting to the container size.

When to use it: When you want the booking experience to be a natural part of the page rather than something the visitor has to click to reveal.

Popup Widget

The popup widget adds a persistent floating button to your site. Clicking it opens the scheduler in a clean overlay on top of the current page.

Best for: Site-wide booking access on every page. The floating button follows the visitor as they browse.

How it looks: A branded button (customizable text, color, and position) in the corner of the screen. Clicking it opens a full-screen overlay with the booking flow.

When to use it: When you want booking to be accessible from any page without dedicating page real estate to the scheduler.

Booking Button

The booking button is a styled link or button element that opens your scheduling page when clicked. It works like any standard CTA but connects to the booking flow.

Best for: Headers, hero sections, navigation menus, email signatures, and anywhere you place calls-to-action.

How it looks: A button that matches your site's design. Clicking it opens the booking page in a new tab, overlay, or redirect based on your settings.

When to use it: When you want booking to be part of your existing page layout and CTA structure rather than a separate widget.

Platform-Specific Setup Instructions

WordPress

WordPress booking setup is the most straightforward of any platform:

1. Install the SchedulingKit WordPress plugin from the plugin directory
2. Enter your API key to connect your account
3. Add the [schedulingkit] shortcode to any page or post, or use the Gutenberg block in the block editor
4. Choose inline, popup, or button mode from the block settings

The plugin works with all major themes including Astra, GeneratePress, Kadence, and Divi. It is compatible with Elementor and WooCommerce if you use those page builders.

Shopify

For Shopify booking:

1. Install the SchedulingKit app from the Shopify App Store
2. Configure your services and availability in SchedulingKit
3. Add the booking widget to any product page, custom page, or the cart using the Shopify theme editor's app blocks
4. Bookings sync with Shopify customer records automatically

The app works with all Online Store 2.0 themes and ties appointments to Shopify orders for unified customer tracking.

Squarespace

Squarespace embedding requires a Business or Commerce plan for custom code blocks:

1. Copy the embed code from your SchedulingKit dashboard
2. In the Squarespace editor, add a Code Block where you want the scheduler
3. Paste the snippet and save
4. The scheduler renders on your live page

For Squarespace Personal plan users, use a booking button or link instead of the inline embed.

Wix

1. Copy your embed code from SchedulingKit
2. In the Wix Editor, drag an "Embed HTML" element onto your page
3. Paste the SchedulingKit snippet into the HTML embed element
4. Resize to fit your layout and publish

No Velo coding is required. The embed works with Wix ADI, Editor X, and Wix Studio layouts.

Webflow

1. Copy the embed code from SchedulingKit
2. In the Webflow Designer, drag an Embed element onto your canvas
3. Paste the snippet into the embed element's code editor
4. Publish your site

The embed supports Webflow CMS collection pages for dynamic embedding, where each collection item can load a different booking page.

Any HTML Website

For static sites, landing page builders, or custom web applications:

1. Copy the HTML snippet from your SchedulingKit dashboard
2. Paste it into your page's HTML body where you want the scheduler
3. Configure options via data attributes on the container div (no JavaScript coding required)
4. The script loads asynchronously and renders the booking widget

The snippet works on any platform that supports custom HTML: Hugo, Jekyll, Eleventy, Ghost, Drupal, Unbounce, Instapage, or any custom-built site.

Configuration Options

Filtering Services and Providers

Control what the widget displays using data attributes or dashboard settings:

• Show specific services only -- Filter the widget to display only the services relevant to that page
• Pre-select a provider -- Link to a specific team member's availability from their bio page
• Filter by location -- Show availability for a single location on multi-location sites

Customizing Appearance

Match the widget to your site's design:

• Brand colors applied to buttons, highlights, and selected states
• Font inheritance from your site's CSS for a seamless look
• Container sizing adapts to the parent element's width
• Custom CSS for advanced styling control

Tracking and Analytics

Monitor booking performance from your embedded widget:

• The widget fires JavaScript events on key actions (slot selected, booking created, booking confirmed)
• Capture these events with Google Analytics, Google Tag Manager, or Meta Pixel
• Use UTM parameters on the embed to attribute bookings to specific pages or campaigns

Performance and Technical Details

The embed is designed to have zero negative impact on your site's performance:

• Asynchronous loading -- The script loads after your page content, so it never blocks rendering
• Under 30KB gzipped -- Minimal transfer size
• No external dependencies -- No jQuery, React, or other libraries required
• CSP-compatible -- Served from a single documented domain you can allowlist in Content Security Policies
• Core Web Vitals safe -- No measurable impact on LCP, FID, or CLS

Common Mistakes to Avoid

Placing the widget below the fold on long pages. If visitors have to scroll extensively to find the booking option, conversion drops. On service pages, place the inline embed near the top or use the popup widget for site-wide access.

Not testing on mobile. Over 60% of bookings originate from smartphones. The widget is responsive by default, but test it within your specific site layout to ensure the container provides enough width.

Redirecting instead of embedding. Sending visitors to an external booking page breaks their browsing flow and increases drop-off. Embedded booking keeps them on your site.

Showing all services on every page. A yoga studio's meditation class page should only show meditation booking options, not every class type. Filter the widget per page for a focused experience.

Forgetting to connect your calendar. The widget displays availability from your linked calendar. If your Google or Outlook calendar is not connected, the widget shows incorrect availability and risks double-bookings.

FAQ

Does the booking widget slow down my website?

No. The widget loads asynchronously after your page content renders, so it has no measurable impact on page speed or Core Web Vitals. The script is under 30KB gzipped.

Can I embed different booking pages on different pages of my site?

Yes. Each embed can be configured to show specific services, providers, or locations. A salon might show haircut booking on the haircuts page and color booking on the color services page.

Does the widget handle timezones automatically?

Yes. The widget detects each visitor's local timezone and displays availability in their time. A visitor in London and a team member in San Francisco both see the correct local times without manual conversion.

Can I use the widget on a password-protected page?

Yes. The widget works on any page that can render HTML, including password-protected areas, member-only sections, and intranet pages.

What happens if two people try to book the same slot?

Real-time calendar locking prevents double bookings. When a visitor begins the booking process, the slot is temporarily held for 10 minutes. If two visitors reach the same slot simultaneously, the second sees updated availability.

How do I track conversions from the embedded widget?

The widget fires JavaScript events on key actions. Capture the bookingCreated event with Google Tag Manager to track conversions. Add UTM parameters to your embed code to attribute bookings to specific pages or marketing campaigns.

Can I embed the widget in an email?

Emails do not support JavaScript, so the full widget cannot render in email clients. Instead, use a booking link or booking button that directs recipients to your embedded scheduling page. The link works in every email client.