How to Add Booking to Your Website: Complete Widget Setup Guide

How to Take Bookings Online: The Complete Solution

Searching for "how to add booking to website" or "booking system website widget"? You're in the right place. Whether you're using Wix, WordPress, Squarespace, or any website builder, adding a booking system is simpler than you think.

Your customers expect to book instantly — at 11pm on a Sunday, during their lunch break, or right after seeing your social media post. If they have to call during office hours or wait for an email reply, they'll book with a competitor instead.

This guide shows you exactly how to add booking to your website using GetaBooking's simple widgets. Copy, paste, done. No coding skills required. Works with every website platform including Wix booking system integration, WordPress, and custom HTML sites.

Getting Your Booking Widget Code

When you sign up to GetaBooking, you get instant access to your Widget Setup page in the Website Content section of your dashboard. This page provides:

• Your unique widget codes: Pre-configured with your business name
• Step-by-step instructions: How to add each widget type to your website
• Live preview: See exactly how your booking widget will look
• Platform-specific guides: Instructions for Wix, WordPress, Squarespace, and more

You don't need to write any code yourself — just copy the provided code and paste it into your website. The widget automatically displays your services, availability, and handles payments.

How to Add Booking to Website: Two Widget Options

There are two main ways to embed booking on your website: iFrame embeds and modal popup widgets. Each has its place.

iFrame Embeds: Full Integration

An iFrame embed places your booking system directly into your website page. It looks like part of your site, scrolls with your content, and gives customers the complete booking experience without leaving your page.

Perfect for:

• Dedicated booking pages: A "Book Now" page on your website
• Service pages: Embed booking directly on pages describing your services
• Landing pages: Campaign pages where booking is the primary action

The code is simple:

<iframe 
  src="https://getabooking.co.uk/your-business?view=clean2"
  width="100%" 
  height="1000px" 
  frameborder="0"
  style="border: none; border-radius: 8px;">
</iframe>

That's it. Copy, paste into your website HTML, replace "your-business" with your actual business name, and you're done. The booking system appears on your page, customers can browse services, see availability, and book with payment — all without leaving your site.

Modal Popup Widgets: Clean and Professional

Modal popup widgets open your booking system in an overlay when customers click a button. The booking system appears over your page, customers complete their booking, then return to your site.

Perfect for:

• Navigation buttons: "Book Now" buttons in your header or menu
• Call-to-action buttons: Throughout your website content
• Homepage hero sections: Primary booking buttons on your homepage

The code is equally simple:

<button id="booking-button">Book Now</button>

<script src="https://getabooking.co.uk/widget.js"></script>
<script>
  document.getElementById('booking-button').addEventListener('click', function() {
    GetaBooking.openClean2('your-business');
  });
</script>

When customers click the button, your booking system opens in a professional modal overlay. They book, pay, and close the modal — all without navigating away from your page.

Which Should You Use?

Use iFrame embeds when booking is the main purpose of the page. A dedicated booking page, a service-specific page, or a landing page where you want customers focused on booking.

Use modal popups when booking is one of several actions customers might take. Navigation buttons, call-to-action buttons throughout your site, or anywhere you want booking available without dominating the page.

Many businesses use both: modal popups for navigation and general "Book Now" buttons, iFrame embeds on dedicated booking pages.

Clean Booking Links: Two Powerful Options

GetaBooking offers two "clean" booking link formats, each optimized for different use cases. Both work everywhere: websites, Facebook, Instagram, email, SMS, QR codes, and printed materials.

Clean View: Choose a Day First

Format: https://getabooking.co.uk/your-business?view=clean

This view shows your services with a calendar button. Customers click a service, choose a day from the calendar, then see available times for that day. Perfect for:

• Services with specific day preferences: Customers who know when they want to book
• Weekly schedules: Classes, sessions, or appointments that run on specific days
• Social media bios: Instagram, TikTok, LinkedIn — anywhere you have one booking link

Clean2 View: Next Available Times

Format: https://getabooking.co.uk/your-business?view=clean2

This view shows your services with availability slots immediately visible. Customers see the next available times in date order and can book instantly. Perfect for:

• Urgent bookings: Customers who want the next available appointment
• High-volume services: Lots of availability, customers want to see options immediately
• Facebook pages: Add to your "Book Now" button for instant availability
• Email campaigns: Show availability directly in marketing emails

Both views load fast (300-400ms), work on mobile, and include your full branding. Customers book and pay in the same flow, with automated confirmations and calendar integration.