How to Embed a Booking Widget on Your Website
How to embed a booking widget on your website in about 15 minutes: pick an inline embed, popup widget, or button link, paste the code into WordPress, Squarespace, Wix, or a custom site, place it where visitors decide to book, and test it on phones.
Start the GuideHow 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.
What You Need Before Embed Booking on Your Website
Make sure you have the following ready:
- An active booking page with services configured
- Admin access to your website
How to Embed Booking on Your Website
7 steps · 15 minutes
Choose your embed type
In SchedulingKit, open Event Types, pick the event, and go to Share & Embed. Choose Inline Embed (the full scheduler inside your page), Popup Widget (a button that opens the scheduler in an overlay), Button Link (a styled Book Now button that opens your booking page), or Direct Link.
Customize the widget appearance
Set your booking page branding (logo and brand color) and, for buttons, clear text such as "Book an appointment", so the widget fits your website.
The popup widget works well on service pages and the homepage because it adds booking without changing your layout.
Copy the embed code
Copy the snippet for your chosen option from Share & Embed. The inline embed is an iframe; the popup widget uses the embed.js script and a SchedulingKit.popup trigger.
Add the code to your website
Paste the snippet into your website's HTML. For WordPress, use a Custom HTML block (or the HTML module in Elementor, Divi, or Beaver Builder). For Squarespace, use a Code Block, or header code injection for the popup script. For Wix, use the Embed HTML element, or Custom Code in site settings for the popup script. On a hand-coded site, paste it where the widget should appear.
Wrap an inline embed in a container with a max-width, set the width to 100%, and give it at least 700px of height so the time picker is not cramped.
Position the widget strategically
Place the inline embed on your services or booking page, popup triggers on your homepage and contact page, and booking buttons on any high-traffic landing pages.
Add context around the widget
Put a clear heading such as "Book your appointment" and a short line on what the session includes and costs above the scheduler. Remove competing calls to action and sidebars near it, and add a plain text link to your booking page underneath as a fallback.
Test across devices and browsers
Verify the widget loads correctly and completes bookings on Chrome, Safari, Firefox, mobile, and tablet. On phones, check that it scrolls smoothly and buttons are easy to tap without zooming.
Was this article helpful?
Frequently Asked Questions
Related Guides
Continue with these related tutorials
Accept Online Bookings
How to accept online bookings for your business in about 30 minutes: add your services and hours, set booking rules, connect your calendar, turn on confirmations and reminders, test the flow, and share one booking link everywhere clients find you.
Create a Booking Page
How to create a professional booking page in minutes, without design or coding skills: organize your services, add your branding, write clear descriptions and a welcome message, set availability, keep the form short, and test it on a phone before you share it.
Create a Scheduling Link
Generate a shareable booking link that lets anyone schedule with you in seconds, perfect for email signatures, social bios, and DMs.
Related Guides & Checklists
Ready to Get Started?
Sign up free and follow this guide step by step, your scheduling will be live in minutes.
Free forever plan available • No credit card required
When this isn't for you
This is not for you if you've already implemented the workflow. The walkthrough is for first-time setup. Skip if your team already has a working process.