SchedulingKit
How-To GuideBeginner15 minutes

How to Embed a Booking Widget on Your Website

Add an inline booking widget, popup, or floating button to your existing website so visitors can schedule without leaving the page.

Start the Guide

How to Embed a Booking Widget on Your Website This step-by-step guide covers everything you need — from prerequisites to pro tips — so you can complete the process in 15 minutes or less. Browse all how-to guides.

Before You Start

Make sure you have the following ready:

  • An active booking page with services configured
  • Admin access to your website

Step-by-Step Guide

6 steps · 15 minutes

1

Choose your embed type

Select inline embed (shows the full scheduler on the page), popup (opens in a modal), or floating button (sticky CTA in the corner).

2

Customize the widget appearance

Match the widget colors, fonts, and button text to your website design so it feels native.

Pro Tip

The floating button works best on service pages and the homepage.

3

Copy the embed code

Generate the HTML/JavaScript snippet from your dashboard and copy it to your clipboard.

4

Add the code to your website

Paste the snippet into your website's HTML. For WordPress, use a Custom HTML widget. For Squarespace, use a Code Block.

5

Position the widget strategically

Place the inline embed on your services page, the floating button site-wide, and a popup trigger on your contact page.

6

Test across devices and browsers

Verify the widget loads correctly and completes bookings on Chrome, Safari, Firefox, mobile, and tablet.

FAQ

Frequently Asked Questions

Will the embed slow down my website?

No. The widget loads asynchronously and is optimized for performance at under 30KB.

Can I embed on multiple pages?

Yes. Use the same code on as many pages as you want.

Does the embed work on Shopify?

Yes. Paste the code into a Custom Liquid section or use the Shopify app integration.

Can clients complete the entire booking in the embed?

Yes. The full booking flow — service selection, time picker, payment, and confirmation — happens within the embed.

Ready to Get Started?

Sign up free and follow this guide step by step — your scheduling will be live in minutes.

Start Free Today

Free forever plan available · No credit card required