Embed a Booking Widget in Your Webflow Site
Add the SchedulingKit booking widget to Webflow using the Custom Code Embed element in the Webflow Designer. Full control over placement, sizing, and styling — no external plugins needed.
Free forever · No credit card required · Live in minutes
A Webflow booking widget is an embeddable calendar that lets visitors schedule appointments directly on your Webflow website without leaving the page. SchedulingKit lets you embed a free booking widget on Webflow in 2026. See all platform guides.
How to Add a Booking Widget to Webflow
Follow these steps to embed the SchedulingKit booking widget on your Webflow site
Copy Embed Snippet
Grab the HTML embed code from your SchedulingKit dashboard under the Embed section.
Open Webflow Designer
Open your project in the Webflow Designer. Navigate to the page where you want to add the booking widget.
Add an Embed Element
From the Add Elements panel (A key), drag the Embed element (under Components) into your desired position on the canvas.
Paste and Configure
Double-click the Embed element, paste the SchedulingKit snippet, and click Save & Close. The widget preview appears on the canvas.
Publish to Staging or Production
Click Publish and choose your staging or custom domain. The widget goes live with your Webflow site and respects all Webflow interactions and animations.
Ready-to-Use Webflow Embed Code
Copy and paste this snippet into your Webflow site to add a booking widget instantly:
<!-- SchedulingKit Booking Widget --> <div id="schedulingkit-widget"></div> <script src="https://widget.schedulingkit.com/embed.js" data-url="https://app.schedulingkit.com/YOUR-BUSINESS" data-style="inline" data-primary-color="#4F46E5" async> </script>
Replace YOUR-BUSINESS with your SchedulingKit booking page URL. Create your free account to get your personalized embed code.
Webflow Widget Features
Platform-specific features that make the booking widget work seamlessly on Webflow
Designer-Native Embed
The Embed element sits on the Webflow canvas like any other element — position it using flexbox, grid, or absolute positioning.
CMS Integration
Use Webflow CMS to create dynamic booking pages where each collection item embeds a different booking widget based on a CMS field.
Interactions Support
Trigger Webflow interactions and animations when the widget loads or when a booking is confirmed, creating a polished user experience.
Responsive Breakpoints
Style the embed container differently at each Webflow breakpoint — desktop, tablet, mobile landscape, and mobile portrait.
Best Practices for Webflow Booking Widgets
Tips for getting the most out of your embedded booking widget on Webflow
Wrap the Embed element in a div with a set min-height to prevent Cumulative Layout Shift during loading
Use Webflow's CMS to dynamically insert different booking page URLs per collection item
Place the widget in a section with an ID anchor so CTAs elsewhere on the page can scroll to it
For a site-wide floating button, add the pop-up widget script in Project Settings → Custom Code → Footer Code
Test on all four Webflow breakpoints to ensure the widget resizes gracefully
Webflow Booking Widget Questions
Does the widget preview render in the Webflow Designer?
The embed shows a placeholder in the Designer canvas. To see the live widget, use Webflow's Preview mode or publish to your staging domain.
Can I use the widget on Webflow CMS collection pages?
Yes. Add a plain text CMS field for the booking page URL, then reference it inside the Embed element using Webflow's dynamic embed feature. Each collection item will render its own booking widget.
Will the widget work on Webflow's free plan?
The Embed element is available on all Webflow plans, including the free Starter plan. However, custom domain publishing and site-wide Code Injection require a paid site plan.
Does it affect Webflow site performance?
No. The widget script loads asynchronously after your page content and is under 30 KB. It has zero impact on your Webflow site's Lighthouse score.
Booking Widget for Other Platforms
Add a Booking Widget to Webflow Today
Join thousands of businesses embedding booking widgets on Webflow with SchedulingKit
Free forever plan available · No credit card required