Add a Booking Widget to Any HTML Website
Embed the SchedulingKit booking widget on any HTML page with a single script tag. Works on static sites, custom-built websites, SPA frameworks, and any platform that supports HTML — the universal installation method.
Free forever · No credit card required · Live in minutes
A HTML booking widget is an embeddable calendar that lets visitors schedule appointments directly on your HTML website without leaving the page. SchedulingKit lets you embed a free booking widget on HTML in 2026. See all platform guides.
How to Add a Booking Widget to HTML
Follow these steps to embed the SchedulingKit booking widget on your HTML site
Copy the Embed Code
Get the HTML snippet from your SchedulingKit dashboard. It includes a single <script> tag and a <div> container element.
Open Your HTML File
Open the HTML file for the page where you want the widget in your code editor — VS Code, Sublime Text, or any editor.
Paste the Div Element
Add the <div id='schedulingkit-widget'></div> element where you want the booking calendar to render in your page body.
Add the Script Tag
Paste the <script> tag just before the closing </body> tag. This loads the widget asynchronously after your page content.
Deploy and Verify
Deploy your updated HTML file to your hosting provider. Open the page in a browser and confirm the widget loads and functions correctly.
Ready-to-Use HTML Embed Code
Copy and paste this snippet into your HTML 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.
HTML Widget Features
Platform-specific features that make the booking widget work seamlessly on HTML
Universal Compatibility
A plain HTML embed works on any web platform, hosting provider, or framework — it's the most flexible installation method.
Framework Agnostic
Works with React, Vue, Angular, Svelte, Astro, Next.js, and any JavaScript framework. Just render the div and load the script.
CDN-Delivered Script
The widget script is served from a global CDN with edge caching, ensuring fast load times from any location worldwide.
Event API
Listen to JavaScript events like booking-confirmed or slot-selected to trigger custom logic, analytics, or redirect flows in your application.
Best Practices for HTML Booking Widgets
Tips for getting the most out of your embedded booking widget on HTML
Place the <script> tag before </body> (not in <head>) for the best page load performance
Add a CSS min-height on the widget container to prevent layout shifts while the script loads
Use the data attributes on the div element to configure the widget without touching JavaScript
For SPAs, initialize the widget after your router mounts the target DOM element
Add the async attribute to the script tag if your build tool doesn't already handle it
HTML Booking Widget Questions
Does the embed work on static HTML sites?
Yes. The widget only requires a <div> element and a <script> tag. No server-side rendering, databases, or build tools are needed. It works on static HTML files hosted anywhere — GitHub Pages, Netlify, Vercel, S3, or a traditional web server.
Can I use the widget with React, Vue, or Angular?
Absolutely. Render the container div in your component template and load the script in a useEffect hook (React), mounted lifecycle (Vue), or ngAfterViewInit (Angular). The widget attaches to the DOM element regardless of how it was rendered.
Does the widget support Content Security Policy (CSP)?
Yes. Add the SchedulingKit CDN domain to your script-src and connect-src CSP directives. Detailed CSP configuration is available in the SchedulingKit docs.
Can I self-host the widget script?
We recommend using the CDN-hosted script for automatic updates and optimal caching. However, the script can be downloaded and self-hosted if your security policy requires it.
Add a Booking Widget to HTML Today
Join thousands of businesses embedding booking widgets on HTML with SchedulingKit
Free forever plan available · No credit card required