Add a Booking Widget to Your Framer Site
Embed the SchedulingKit booking widget in Framer using a Code Embed component. Drop it onto any Framer page or section and publish — your visitors book directly on your high-performance Framer site.
Free forever · No credit card required · Live in minutes
A Framer booking widget is an embeddable calendar that lets visitors schedule appointments directly on your Framer website without leaving the page. SchedulingKit lets you embed a free booking widget on Framer in 2026. See all platform guides.
How to Add a Booking Widget to Framer
Follow these steps to embed the SchedulingKit booking widget on your Framer site
Copy the Embed Code
Get the HTML snippet from your SchedulingKit dashboard's Embed section.
Open Your Framer Project
Launch your project in the Framer web editor and navigate to the page where you want the widget.
Insert a Code Embed
Press / to open the insert menu, search for 'Embed', and select the HTML Embed component. Place it on your canvas.
Paste the Snippet
Click the Embed component, paste the SchedulingKit code into the HTML field, and resize the component to fit your layout.
Ready-to-Use Framer Embed Code
Copy and paste this snippet into your Framer 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.
Framer Widget Features
Platform-specific features that make the booking widget work seamlessly on Framer
Code Embed Component
Framer's native code embed renders the widget directly on the canvas with full layout control via the properties panel.
Breakpoint Responsive
Adjust the embed's dimensions per breakpoint so the widget fits perfectly on desktop, tablet, and mobile.
Framer Motion Compatible
Wrap the embed in a Framer Motion container to animate it into view with scroll-triggered or page-load animations.
CMS-Driven Booking Pages
Use Framer's CMS to create dynamic service pages, each with a unique booking widget powered by a CMS field.
Best Practices for Framer Booking Widgets
Tips for getting the most out of your embedded booking widget on Framer
Set the embed component to fill width and use a fixed height of at least 600px for the full calendar view
Use Framer's built-in interactions to reveal the widget on scroll for a more engaging experience
For a floating booking button, add the pop-up widget script in your project's Custom Code settings
Preview the page in Framer's live preview before publishing to verify the widget loads correctly
Leverage Framer CMS to dynamically assign different booking URLs per service page
Framer Booking Widget Questions
Does the embed preview work in the Framer editor?
Framer shows a live preview of HTML embeds on the canvas. You'll see the widget rendering in real time as you design your page.
Can I use the widget on Framer's free plan?
Yes. Code Embed components are available on all Framer plans. Publishing to a custom domain requires a paid plan, but you can test the widget on the free framer.app subdomain.
Will the widget slow down my Framer site?
No. Framer sites are statically generated and the widget loads asynchronously. Your site's performance score remains unaffected.
Can I trigger the booking widget from a Framer button?
Yes. Use the pop-up widget mode and trigger it via a JavaScript onclick event on any Framer button component using the Code Override feature.
Booking Widget for Other Platforms
Add a Booking Widget to Framer Today
Join thousands of businesses embedding booking widgets on Framer with SchedulingKit
Free forever plan available · No credit card required