Tutorials AI Tools Industries Templates Start Here Find Your Tools →
Booking & Scheduling Automation

How to Add Online Booking to Any Website (30-Minute Setup)

⏱ 30 minutes to complete Updated February 2026

WordPress, Wix, Squarespace, Shopify, or a custom HTML site, it doesn't matter. You can have a working "Book Now" button on your website today. No coding degree required.

F
M
Fredrik Filipsson & Morten AndersenCo-founders, Main Street AI · built multi-million dollar businesses with AI
Affiliate Disclosure: Some links below are affiliate links. We earn a small commission if you sign up, at no cost to you. Full disclosure →

What you'll achieve

  • A live booking widget embedded directly on your website
  • Clients can book without leaving your site
  • Automatic confirmation emails sent the moment someone books
  • Your calendar synced so you never double-book
  • Works on WordPress, Wix, Squarespace, Shopify, and custom sites

The good news: adding online booking to your website is mostly a copy-paste job. Every major booking platform generates a small piece of code, called an embed widget, that you paste into your site. The booking tool does all the heavy lifting: it shows your calendar, collects client info, sends confirmations, and syncs with your Google Calendar. Your job is just putting it in the right spot on your website.

Before You Start

Which booking tool should you use?

We recommend Calendly for most small businesses because it's free to start, works on every website platform, and takes about 10 minutes to configure. We'll use Calendly in this tutorial. (If you prefer Acuity, Setmore, or another tool, the embed steps are nearly identical.)

📅CalendlyFree to start
✂️AcuityBest for service biz
📋SetmoreFree 4 seats
🟦Square ApptsFree for solo
1

Create your Calendly account and set up availability

Go to calendly.com and create a free account using your business email. Once in, you'll need to:

  1. Connect your Google Calendar or Outlook Calendar (this prevents double-bookings, Calendly checks your existing events before showing availability)
  2. Set your working hours under Availability → Working Hours
  3. Create an "Event Type", this is one type of appointment you offer (e.g. "30-Minute Consultation" or "Hair Appointment")
  4. For each event, set the duration, buffer time before/after, and max daily bookings
📸Screenshot: Calendly event type creation screen
💡 Free tier limits

Calendly's free plan allows one event type. If you need multiple appointment types (e.g. "New Client Consult" vs "Follow-Up"), upgrade to Standard ($12/mo) or use Acuity Scheduling which has more generous tiers for service businesses.

2

Get your embed code

In Calendly, click your event type, then look for the Share button. You'll see three embed options:

  • Inline Embed, Shows the full booking calendar directly on your page (most professional, recommended)
  • Popup Widget, Adds a floating button that opens a booking popup (good if you want a subtle addition)
  • Popup Text, Turns any link into a popup trigger (great for CTAs in blog posts)

For your main booking page, choose Inline Embed. Click "Copy Code." You'll get something like this:

<!-- Calendly inline widget -->
<div class="calendly-inline-widget"
  data-url="https://calendly.com/your-name/30min"
  style="min-width:320px;height:630px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js"
  type="text/javascript" async></script>

Keep this code handy, you'll paste it into your website in the next steps.

3

Add the booking widget to your website

How you add the code depends on your website platform. Expand your platform below:

WordPress (Gutenberg or Classic Editor)

Gutenberg Editor:

  1. Open the page where you want booking (e.g. "Book Now" or "Contact")
  2. Click the + button to add a new block
  3. Search for "Custom HTML" block and add it
  4. Paste the Calendly embed code into the HTML block
  5. Click "Preview" to confirm it appears, then "Update" or "Publish"

Classic Editor: Click the "Text" tab (not Visual), position your cursor where you want the widget, and paste the embed code.

Wix

Wix has a built-in "HTML iframe" element that accepts embed codes.

  1. Open your page in Wix Editor
  2. Click Add (+) → Embed → HTML iframe
  3. A grey "HTML" box appears, double-click it
  4. Select "Code" and paste your Calendly embed code
  5. Click "Apply" and resize the box as needed
  6. Publish your site
Squarespace

Squarespace uses "Code Blocks" for custom HTML.

  1. Edit the page where you want booking
  2. Click the area where you want to add the widget
  3. Click the + insert block, scroll down to find Code
  4. Paste your Calendly embed code
  5. Click "Apply." The widget renders directly in edit mode
  6. Save and publish

Note: You may need a Business plan ($23/mo) on Squarespace to use code blocks.

Shopify

Shopify works well for service businesses that also sell products.

  1. In Shopify admin, go to Online Store → Pages
  2. Create or open your "Book an Appointment" page
  3. In the text editor, click the </> (source code) button
  4. Paste the Calendly embed code where you want it to appear
  5. Save the page
Custom HTML / Any Other Platform

If you have access to your website's raw HTML files:

  1. Open the HTML file for your booking page in a text editor
  2. Find where you want the booking widget to appear in the page body
  3. Paste the Calendly embed code at that location
  4. Save and upload the file to your hosting provider

If your platform has a "Custom Code" or "Footer Scripts" section (common in Webflow, Ghost, etc.), you can also paste the <script> tag there and just the <div> portion on your page.

4

Add a "Book Now" button (optional, but drives more bookings)

The embedded widget works, but adding a prominent "Book Now" button or CTA (call-to-action) elsewhere on your site, your homepage, blog posts, email footer, will significantly increase bookings. Two options:

  • Simple link, Link any text or button directly to your Calendly booking URL (e.g. https://calendly.com/your-name). Opens the booking page in a new tab.
  • Popup trigger, Use Calendly's popup code to open a booking modal when any button is clicked. Keeps visitors on your site the whole time.
📸Screenshot: "Book a Consultation" button on homepage hero section
5

Test the entire booking flow before going live

Don't skip this step. Book a test appointment yourself using your personal email. Confirm:

  • You receive a confirmation email within 60 seconds
  • The appointment appears in your Google Calendar (or Outlook)
  • The client (you) receives a calendar invite they can add to their calendar
  • The "reschedule" and "cancel" links in the confirmation email work
  • Reminder emails arrive at the right times

Then cancel the test appointment so it doesn't stay on your calendar.

💡 Mobile check

Test the booking widget on your phone too. Over 60% of people browsing local business websites are on mobile. If the widget is tiny or cut off, adjust the height in the embed code, try 700px or 800px for mobile-friendlier display.

Your booking page should be live by now

If you're still on the fence about which tool to use, Calendly's free tier is a zero-risk starting point.

Try Calendly Free →

What to Automate Next →

→
Automated Appointment Reminders: Stop No-Shows ForeverNow that booking is live, set up the reminder sequences that fill cancellations
 →
Salon Booking Automation: From Phone Tag to Auto-ScheduleDeep dive specifically for salon and beauty businesses
 →
Automated Booking Systems: Complete Small Business GuideEverything about booking automation in one place
 →
Google Calendar Automation: Connect EverythingLink your booking tool, CRM, and email in one connected system