How to Add Online Booking to Your Website (WordPress, Wix & Squarespace)

Your website is often the first place a new customer meets your business. If the only way to book is "call us" or "send us a message", you're asking people to do extra work at the exact moment they're ready to buy — and many won't.

Adding online booking to your website lets customers pick a time and book instantly, day or night. The good news: you don't need a developer. With a booking widget you can add a "Book now" experience to WordPress, Wix, Squarespace or almost any website builder in about five minutes.

This step-by-step guide shows you how.

Why add online booking to your website?

• Capture bookings 24/7. A big share of bookings happen in the evening and at weekends, when you're not answering the phone. (See our data on online vs phone bookings.)
• Convert more visitors. Every extra step between "I want this" and "I've booked" loses customers. A booking widget removes them.
• Keep customers on your own brand. Sending people to a marketplace app means they also see your competitors. A widget keeps them on your site.
• Reduce admin. No more back-and-forth messages to find a time that works.
• Cut no-shows. Online bookings come with instant confirmation and automatic reminders — two of the most effective ways to reduce no-shows.

Booking widget vs booking link: which do you need?

You'll usually use both:

With Dyal, you get both from the same place, and they always show the same live availability.

Step 1: Set up your booking page

Before you embed anything, set up what customers can book:

1. Add your services or resources — haircuts, treatments, classes, courts, rooms, consultations.
2. Set your opening hours and availability, including breaks and days off.
3. Add staff or locations if you have more than one.
4. Choose your branding — logo, colours and photos — so the booking page looks like part of your business.
5. Decide on payments — whether customers pay when they book. (Our guide to taking deposits for appointments helps you decide.)

Step 2: Copy your embed code

In Dyal, go to Setup → Widgets, open your booking widget and click Copy Code. This copies a short iframe snippet that looks something like this:

<!-- Dyal Booking Widget -->
<iframe
  src="https://www.dyal.co.uk/your-business"
  style="width: 100%; min-height: 700px; border: none; border-radius: 12px;"
  title="Book an Appointment"
  loading="lazy"
></iframe>

Need a link instead? Click Copy Link to get your direct booking page URL.

Step 3: Add the widget to your website

WordPress

1. Open the page where you want booking to appear (for example, "Book Now").
2. Click the + button to add a block and search for Custom HTML.
3. Paste your embed code into the block.
4. Click Preview to check it, then Update or Publish.

Tip: if your theme uses a page builder such as Elementor or Divi, use its HTML or Code element instead.

Wix

1. In the Wix Editor, click + Add on the left.
2. Choose Embed Code → Embed HTML (sometimes shown as HTML iframe).
3. Click Enter Code, choose Code, and paste your embed code.
4. Drag the box to size it — make it tall enough to show the whole calendar — then Publish.

Squarespace

1. Edit the page and click Add Block where you want the booking widget.
2. Choose Code.
3. Paste your embed code, make sure the mode is set to HTML, and click away to save.
4. Save the page and check it on mobile.

Shopify, Webflow, GoDaddy and other builders

Almost every website builder has a Custom HTML, Embed or Code block. Add one, paste the embed code, and publish. If your builder doesn't allow custom code, use a "Book now" button that links to your booking page URL instead.

Step 4: Add booking everywhere customers find you

Your website is only one entry point. Put your booking link in:

• Google Business Profile — add it as your booking or appointment URL so customers can book straight from Google Search and Maps.
• Instagram and TikTok bio — "Book now 👇" with your link.
• Facebook page — set the action button to "Book now".
• WhatsApp Business — save it as a quick reply.
• Email signature and invoices.
• A QR code on your reception desk, flyers or receipts.

Step 5: Test it like a customer

Before you announce it, book yourself an appointment:

• Does the widget load quickly on a phone?
• Is it obvious what to tap first?
• Do you receive the booking straight away, with the right service, time and location?
• Does the customer get a confirmation email?

Fix anything confusing — most drop-offs happen on mobile.

Tips to get more bookings from your widget

1. Put a "Book now" button at the top of every page, not just the booking page.
2. Keep the booking form short. Ask only for what you genuinely need — usually name, email and phone.
3. Show real availability. Empty-looking calendars put people off; offer enough slots that customers can find a time.
4. Use clear service names and prices. "Men's cut — 30 min — £22" beats "Service A".
5. Make the page fast. A slow website loses bookings before the widget even loads.
6. Follow up. Use email campaigns to bring past customers back. See email marketing for salons and barbers.

Don't forget the phone

Adding online booking doesn't mean everyone will use it. Some customers will always prefer to call — and if nobody answers, they'll ring someone else. Dyal's AI receptionist answers calls, checks your live availability and books appointments into the same calendar as your website bookings. Read why missed calls are lost revenue.

Frequently asked questions

How do I add a booking system to my website?

Sign up for booking software that provides an embed code, set up your services and availability, copy the code, and paste it into a Custom HTML, Embed or Code block on your website. It usually takes around five minutes.

Can I add online booking to a Wix or Squarespace site?

Yes. Both support embedding external booking widgets: use Embed HTML in Wix or a Code block in Squarespace and paste your booking widget code.

Do I need a developer to add a booking widget?

No. If you can edit text on your website, you can add a booking widget — it's copy and paste.

Will a booking widget slow down my website?

A well-built widget loads only when the page is viewed and has minimal impact. Test your page speed after adding it, especially on mobile.

Can customers pay when they book through the widget?

Yes, with Dyal you can set a price on a service or resource, and customers pay securely by card when they book.

Get started

Adding online booking to your website is one of the quickest wins for any appointment-based business. See Dyal's plans or explore our customisable booking page — online booking starts at £10 a month, with no commission on bookings.