Add an Online Booking Widget to Any Website (No Code)
Imagine you run a yoga studio. Your website has been live for two years — a friend built it back then — and you barely remember the login. But someone told you that adding a "Book Now" button is just
Imagine you run a yoga studio. Your website has been live for two years — a friend built it back then — and you barely remember the login. But someone told you that adding a "Book Now" button is just one pasted snippet away.
They're right. And you can do it in about 20 minutes.
Key Takeaways:
- Any website — WordPress, Wix, Squarespace, plain HTML — can have a working "Book Now" button today
- Setmore, Cal.com, and Calendly all offer genuinely free plans with no time limit
- Three widget styles exist; the floating button is the best default for mobile visitors
- You don't need your web developer, a plugin, or any coding knowledge
In This Article
- Why Embedded Booking Beats Sharing a Link
- Three Ways to Add It: Inline, Popup, or Floating
- Best Free Booking Tools: Quick Comparison
- How to Get Your Embed Code
- Paste It In: 7 Platforms Covered
- Before You Go Live: 3-Minute Mobile Check
- When Something Breaks: Quick Fixes
- FAQ
Why Embedded Booking Beats Sharing a Link
Most small business owners start by dropping a Calendly link in their Instagram bio or the footer of their site. That works — until it doesn't.
The problem: every time a customer has to leave your website to book, you lose some of them. They get distracted. The new tab doesn't load. They tell themselves they'll come back later. They won't.
Multiple scheduling platforms have published data showing a 2–3× lift in completed bookings when the calendar is embedded directly on the business's website compared to sending customers to an external page. Once you paste the short snippet your booking tool gives you, the whole experience happens on your site — no redirects, no friction.
This is especially important for mobile visitors, who make up the majority of traffic for most local service businesses. An extra tap away from your site is bookings you're leaving on the table.
Three Ways to Add It: Inline, Popup, or Floating
Before you grab an embed code, decide which style makes sense for your site:
Inline widget — The full booking calendar lives directly on the page. Visitors see it the moment they land there without clicking anything. Best for: businesses where booking IS the main reason someone visits (massage therapist, tutoring center, tattoo studio). Usually placed on a dedicated "Book" page.
Popup widget — A button sits on your page; clicking it opens the calendar in an overlay window. Keeps pages clean. Best for: businesses that want to show content first — a restaurant displaying its menu, a photographer showing their portfolio — before the booking option appears.
Floating button — A persistent "Book Now" chip sticks to the bottom corner of every page. Even if a visitor is reading your About page or scrolling your gallery, the button is always there. Best default choice for any mobile-heavy audience, which is most service businesses.
Pick one. Adding all three to the same page creates clutter and confusion.
Best Free Booking Tools: Quick Comparison
All five tools below have genuinely free plans — not trials, not "free with credit card."
| Tool | Free Plan Includes | Widget Types | Best For |
|---|---|---|---|
| Setmore | Unlimited appts, up to 4 staff, email reminders | Inline, popup, floating | Salons, spas, trainers, tutors |
| Cal.com | Unlimited event types, calendar sync, Stripe payments | Inline, popup, floating | Tech-comfortable owners wanting full control |
| Calendly | 1 event type, unlimited bookings | Inline, popup | Consultants, coaches, solo professionals |
| TidyCal | Unlimited bookings, 1 calendar connection | Inline (iframe) | Freelancers, simple 1:1 appointments |
| Square Appointments | 1 location, 1 staff | Inline, popup | Anyone already using Square for payments |
My honest recommendation if you're starting from zero: Setmore. Their free tier is the most generous in 2026 — unlimited appointments, up to four staff members, email reminders, and it works seamlessly on every website builder. Zero gotchas.
Cal.com is a strong second if you want open-source control and don't mind a slightly longer setup. Calendly is the most recognized name but frustrating on the free plan — one event type means a salon can't list cuts, colors, and blowouts separately without paying.
How to Get Your Embed Code
All five tools generate a short HTML snippet for you. Here's where to find it in the three most popular options:
Setmore:
- Sign in → Settings → Website Integration
- Choose your widget style (inline, popup, or floating button)
- Customize the button color to match your site
- Click Copy Code — you'll get a short snippet
Calendly:
- Open your event type → Share → Add to Website
- Choose Inline, Popup Text, or Popup Widget
- Copy the code snippet
Cal.com:
- Open your event type → Share → Embed
- Pick your style, adjust colors → Copy snippet
The snippet will look like a short block of unfamiliar-looking characters. Don't let that intimidate you — it's just text, and you're about to paste it in one specific spot.
Paste It In: 7 Platforms Covered
WordPress — Edit your page, switch to the Code editor (or add a Custom HTML block in Gutenberg), and paste. For the floating button, go to Appearance → Theme File Editor → footer.php and paste just before </body>.
Wix — Drag an Embeds element onto your page, choose "HTML iframe," and paste inside. For the floating button: Settings → Custom Code → Add Code to Pages → Body – end.
Squarespace — Add a Code Block to any page and paste your snippet. For the floating button: Settings → Advanced → Code Injection → Footer.
Webflow — Drag in an HTML Embed element and paste inside. For the floating button: Project Settings → Custom Code → Footer Code.
Plain HTML site (the kind your cousin built in 2019) — Open the .html file in any text editor and paste your snippet where you want it to appear. For the floating button, paste it just before </body> in every page's file. A free editor like VS Code works fine.
Shopify — Themes → Edit Code → Open theme.liquid → paste the floating button snippet just before </body>. For an inline widget on a page: add a Custom HTML section in your page's content.
Google Sites — Insert → Embed → "By code." Note: Google Sites restricts some JavaScript, so Cal.com's iframe option works better here than JS-based embeds.
If your site is on a platform not listed here, the same logic applies: find where to add custom HTML or a code block, paste your snippet, save. Every major platform has this.
Before You Go Live: 3-Minute Mobile Check
Grab your phone and run through these three things before you announce the widget:
1. Does the calendar actually load on mobile? Open your page on your phone's browser. If it doesn't appear within 3 seconds, try switching to your booking tool's iframe version instead of the JavaScript embed — it's usually more compatible with older phones.
2. Is the button visible without scrolling? Floating buttons solve this automatically. If you used an inline widget, make sure it sits above the fold on mobile (visitors shouldn't have to scroll to discover it). Move it up the page if needed.
3. Can you complete a test booking end-to-end? Go all the way through on your phone — select a service, pick a time, fill in your name, confirm. If anything breaks, check that your booking tool's mobile settings are turned on. Most tools have a mobile-optimized view toggle under display settings.
Three minutes. Do this before you tell clients the button is live.
When Something Breaks: Quick Fixes
Blank white box where the widget should be — Your website's security settings are blocking the embed. Try switching from the iframe version to the JavaScript embed (or vice versa). If you're on a managed hosting plan, contact support and ask them to allow embeds from your booking tool's domain.
Button color doesn't match your site — Go back to the embed settings in your booking tool (Setmore and Calendly both have visual color pickers) and adjust before copying the code again. You don't need to touch CSS.
Works on desktop, invisible on mobile — Some WordPress themes or page builders disable custom code on mobile separately from desktop. Check your theme's mobile settings, or use the booking tool's hosted page as a direct button link on mobile instead.
Bookings don't appear in your calendar — You likely skipped the calendar sync step during setup. Go to Settings → Integrations in your booking tool and connect your Google or Outlook calendar. Both Setmore and Calendly walk you through this in about 60 seconds.
If you'd rather skip the "add to existing site" puzzle entirely, Fardino builds your website with booking already wired in — describe your business, and it ships a complete site with a pre-configured booking section.
For the bigger picture on setting up a small business website, the Small Business Website Playbook covers everything from templates to going live. And if you're building specifically for a service business, our guides on hair salon websites with booking and personal trainer and yoga studio sites go deep on booking setup in those specific contexts.
Want a faster shortcut to getting your first booking widget live? Start with Add Online Booking in 15 Minutes — it covers tool selection and basic setup in one shot.
Frequently Asked Questions
How do I add an online booking widget to my website for free?
Sign up for Setmore, Calendly, Cal.com, or TidyCal — all have free plans with no expiration. Go to the embed or widget settings in your account, copy the code snippet, and paste it into your website's HTML or page editor. Most website builders have a "Custom HTML" or "Code block" element that makes this a simple paste job.
Can I add a booking widget to a website I didn't build myself?
Yes. As long as you have access to the back end — even just to edit a single page — you can paste the widget snippet. The "who built it" doesn't matter. The only hard exception is fully locked platforms like Linktree or Facebook pages, where you can't add custom code at all; in those cases, link directly to your booking page instead.
What is the easiest free booking widget to embed in 2026?
Setmore is the easiest for non-technical users: visual setup, one-click copy, and it works on every major builder. Calendly is more widely recognized but the free plan's one-event-type limit frustrates most service businesses quickly.
What's the difference between an inline and a popup booking widget?
Inline shows the full calendar directly on your page — no click required. Popup keeps your page cleaner and reveals the calendar when someone clicks your "Book Now" button. The floating button is a third style: a persistent chip that stays visible in the corner as visitors scroll any page on your site. For most mobile-first service businesses, floating is the best default.
How do I add a booking widget to a plain HTML website?
Open your .html file in any text editor and paste the snippet from your booking tool wherever you want it to appear. For a floating button, paste it just before the </body> tag. No framework, no plugins, no special skills required — it's a text paste.
Written by the 0xMinds Team — we test AI tools so you don't have to. Build a website with AI →
Got an idea? Build it now.
Describe the site or app you want — Fardino turns it into a live website.
