You can add booking to your website using a hosted booking page link, an embedded widget, a plugin or builder app, an API integration, or a custom build. A hosted link or embed gets you live fastest, while an API or custom build gives you the most control. Whichever you pick, plan your payments and analytics alongside it, not after launch.
TL;DR:
- Choose a hosted link for a fast launch, a plugin for staff calendars and cancellation rules, and a developer for custom logic or system syncing.
- Hosted pages and embedded widgets can break GA4 session tracking; configure cross domain measurement and verify booking events in DebugView before trusting conversion reports.
- Decide whether to collect a deposit or full payment at booking, test sandbox transactions, and reconcile every bank settlement against a confirmed appointment.
- Before launch, test the form by keyboard and screen reader, check it at 200% zoom, and display phone and email alternatives if a step blocks access.
Table of Contents
- Which booking method fits your business?
- Option 1: link to a hosted booking page
- Option 2: embed a booking widget or iframe
- Option 3: install a plugin or your builder's booking app
- Option 4: connect a booking system through its API
- Option 5: build a custom booking system
- Where should payments sit in the booking flow?
- How do you track bookings reliably with GA4?
- Accessibility: quick tests and fixes for booking flows
- Pre-launch checklist: what to test before going live
- What a conversion-focused developer would tell you
- How we can set up and improve booking on your site
- FAQ
- Sources
Which booking method fits your business?
Your choice comes down to speed against control. A hosted page, an inline widget or a popup button all work with the major website builders, so the platform rarely decides for you. Your staffing, payment needs and tolerance for technical work do.
- Hosted booking page link: a quick way to get started. Best for solo practitioners such as a personal trainer or therapist who want a "Book now" button and nothing else.
- Embedded widget or iframe: keeps the booking flow on your page. Suits small teams who want customers to book without leaving the page, such as a salon.
- Plugin or builder app: a few hours of setup. Good for multi-staff businesses that need staff calendars, buffer times and cancellation rules inside their own site.
- API integration: requires a developer. Right for custom interfaces, two-way data sync or booking data feeding a CRM.
- Custom build: reserved for unusual scheduling rules, such as classes with waiting lists, equipment pooling or local regulatory constraints.
The trade-off is plain: the quicker routes hand you less control over design and measurement. Bring in a developer when you need custom logic, when bookings must sync with other systems, or when a tracking gap is costing you revenue you cannot see. If none of those apply, start with the simplest route and move up only when it limits you.
Option 1: link to a hosted booking page
A hosted page is the lowest-effort way to start taking bookings. Your booking provider runs the page, handles availability and payments, and you simply point customers at it.
- Sign in to your booking provider and open the section for sharing or publishing your booking page.
- Copy the public booking link.
- Add a clear button or text link on your site, labelled with the action, such as "Book a consultation" rather than "Click here".
- Publish and click through as a customer would.
Placement drives conversions. Put the button in your header so it follows visitors down the page, on every service page next to the service description, in the footer, and in your social media profiles and e-mail signature. Visitors who are ready to book should never have to hunt for the next step.
One caution: a hosted page lives on another domain. That means your analytics can lose the visitor at the handoff, so you need to check measurement before you trust any numbers. We cover the fix in the GA4 section below.
Before announcing the link, run this checklist:
- Make a real test booking, paying with the cheapest real service or a sandbox if the provider offers one.
- Confirm the e-mail or SMS notification arrives, and read it for wrong times or names.
- Check the booking appears in the correct staff calendar at the right time.
- Cancel and reschedule once to make sure those flows work.
- Open the link on a phone, because most bookings start on one.
Pro Tip: Book your test appointment from a phone on mobile data, not your office Wi-Fi. It shows you what customers actually experience, including loading speed and tap targets.
Option 2: embed a booking widget or iframe
Embedding keeps customers on your page while the provider's booking tool runs inside it. The provider gives you a snippet: either a script tag or an iframe. Where you paste it depends on your builder.
- WordPress: use a Custom HTML block or the shortcode the provider supplies.
- Wix: add an Embed element and paste the code into the HTML box.
- Squarespace: insert a Code block and paste the snippet.
- Webflow: drag in an Embed element and paste the code.
- Shopify: add a Custom Liquid section or edit the page template.
Booking forms are high-risk for accessibility. A third-party widget running on your site is part of your interface, so keyboard and screen-reader problems are yours to resolve. Run three quick manual tests: tab through the whole form without a mouse, listen to it with a screen reader such as NVDA or VoiceOver, and zoom the browser to 200% to see whether anything overlaps or disappears.
Iframes also create a measurement problem. Because they load on a different domain, GA4 treats the handoff as a new session, which breaks conversion tracking and inflates referral traffic. You can spot it by checking whether your own booking provider shows up as a referral source in your reports.
For responsive styling, set the iframe width to 100% rather than a fixed pixel value, give it generous height so the date picker does not need an inner scrollbar, and test at phone widths.
Pro Tip: Place the widget on a dedicated booking page and link to it from everywhere else. It keeps load times on your other pages lean and gives you one clean page to measure.
Option 3: install a plugin or your builder's booking app
Plugins and builder apps sit between a simple embed and a full integration. They run inside your site, so there is usually no domain handoff and no iframe session problem, yet you still avoid writing code.
Typical installation follows the same pattern: find the booking app in your builder's marketplace or the WordPress plugin directory, install it, connect your calendar, then connect your payment settings. Most take a few hours to configure properly, mainly because the settings need thought rather than technical skill.
The settings that matter most:
- Availability windows: the hours you are genuinely bookable, not just opening hours.
- Buffer times: gaps between appointments for travel, cleaning or notes.
- Staff calendars: each person's own hours, leave and services.
- Cancellation rules: how late customers may cancel or reschedule without penalty.
- Notifications: confirmation and reminder messages, plus an alert to you or your staff.
Most of these tools connect to payment gateways and Google or Outlook calendars directly, so a booking can take a deposit and block your calendar in a single step. Test in preview mode first, then make several test bookings across different services and staff members. Finally, open each staff calendar and verify the entries landed at the right time. Plugin updates occasionally change behaviour, so repeat a test booking after every major update.
Option 4: connect a booking system through its API
An API integration is the right call when off-the-shelf screens do not fit. Typical reasons include a fully custom booking interface, two-way data sync with a CRM or accounting package, or backend logic the provider's own tools cannot express.
Plan for these essentials:
- API keys and authentication: keep keys on the server, never in front-end code a visitor can read.
- Webhooks: let the booking system notify your site instantly when a booking is created, changed or cancelled.
- Secure storage: customer names, numbers and e-mail addresses are personal data, so store only what you need and protect it.
- Error handling: decide what the customer sees when the provider is slow or unavailable.
An API route avoids the iframe session problem, since the booking happens on your own pages, but it needs a developer and proper testing. The test cases that catch the most expensive bugs are webhook delivery (does every event arrive, and does a retry cause a duplicate?), race conditions (two customers taking the last slot at the same moment) and duplicate bookings from a double-clicked button.
Pro Tip: Build a small test script that fires the same booking request twice in quick succession. If your system books both, you have found a problem before a customer does.
Option 5: build a custom booking system
A custom build means your own availability logic, interface and admin tools, owned outright. It is the most powerful option and almost always the most expensive, so it needs a real justification.
The core feature set is larger than most owners expect:
- Availability engine: rules for hours, services, durations, staff, holidays and capacity.
- Calendar interface: a date and time picker that works on every device.
- Payments: deposits, full payment, refunds and receipts.
- Admin console: where you and your staff view, move and cancel bookings.
- Notifications: confirmations, reminders and follow-ups by e-mail or SMS.
The trade-off is cost and upkeep against total control and a booking experience that matches your brand exactly. Custom is justified when your scheduling rules are genuinely unusual, when you must integrate with local systems that no provider supports, or when regulation constrains where and how data is held. A mobile-friendly design is non-negotiable: customers will book from phones, so the date picker and form fields need generous tap targets.
Ongoing work is the part people underestimate. You will need security updates, regular backups, monitoring and someone to fix problems on a Saturday morning. If that list sounds heavier than your actual requirement, one of the earlier options will serve you better.
Where should payments sit in the booking flow?
Hosted booking pages typically handle payments for you, and embedded widgets and API routes can too, depending on the vendor. Taking a deposit at booking time is the simplest way to cut no-shows, so decide early whether you charge a deposit, the full price, or nothing upfront.
South African businesses have several local gateway options:
- iKhokha: its iK Pay Gateway takes card and EFT payments, connects through plugins for Wix and WooCommerce or a custom API, and settles to your registered bank account within 1 to 3 business days.
- Bob Pay: integrates with Shopify and WooCommerce and offers an API for custom sites, with no monthly subscription.
- Yoco: another widely used local option for online card payments.
Fees are usually transaction-based. As an example, iKhokha lists card fees of around 2.85% excluding VAT, with no fixed monthly cost. Expect to complete merchant verification, including FICA approval, before payouts start, and allow time for it.
Test payments in the provider's sandbox before going live. Then reconcile: make sure each settlement in your bank matches a confirmed booking, so nothing is paid for without a slot or booked without payment.
How do you track bookings reliably with GA4?
When your booking engine sits on another domain, GA4 will treat the handoff as a new session unless you configure cross-domain measurement. The result is undercounted bookings and a misleading picture of where customers come from. The fix has two parts: tell GA4 about both domains, and fire the right events.
To measure bookings accurately in GA4, use an event-based model and send the purchase event on booking confirmation, with a unique transaction_id, a currency and a value. Fire these events through the booking journey:
- begin_checkout: the customer starts the booking.
- add_payment_info: they enter payment details.
- purchase: the booking is confirmed, with transaction_id, currency and value.
Use Google Tag Manager to wire these up, so you can change tracking without editing your site code each time. Then verify in DebugView: make a test booking and confirm the whole sequence appears as one session, with the events in order and the purchase parameters filled in. If you see two sessions, your cross-domain setup is incomplete.
Pro Tip: Use a different, recognisable name or e-mail on every test booking. It lets you find and exclude test purchases from your reports afterwards.
Accessibility: quick tests and fixes for booking flows
Booking forms are where accessibility problems cost you customers, because a blocked date picker means a lost booking. Manual tests can help find common problems:
- Keyboard only: put the mouse away and tab through the entire flow. You should reach every field, pick a date and submit.
- Screen reader: run NVDA, VoiceOver or TalkBack and listen. Every field should announce a meaningful label.
- 200% zoom: zoom the browser and check that nothing is cut off or overlapping on a narrow screen.
- Visible focus: confirm there is always a clear outline showing where the keyboard is.
Common failures include unlabelled form fields and date pickers that only respond to a mouse. If you find one, report it to your vendor with the exact step where it fails. Ask them for a VPAT or accessibility conformance statement; it tells you what they have tested and where known gaps remain. Embedded widgets count as part of your own interface, so the responsibility does not simply move to the vendor.
While any fixes are pending, show a fallback booking channel, such as a phone number and an e-mail address, next to the booking button.
Pro Tip: Ask for the VPAT before you sign up, not after. A vendor that cannot produce one is telling you something.
Pre-launch checklist: what to test before going live
Run these in order and fix anything that fails before announcing the booking feature.
- Complete an end-to-end booking: use a sandbox payment where available, and confirm the confirmation message arrives by e-mail or SMS with the correct details.
- Verify GA4: open DebugView, repeat the booking and check that the events fire in order within a single session across the domain handoff.
- Check calendars and time zones: confirm the booking lands in the right staff calendar, and that times display correctly from both your side and the customer's, including around daylight saving changes if you serve international clients.
- Test cancellation and rescheduling: make sure the slot is released and notifications are sent.
- Run the accessibility quick tests: keyboard, screen reader, zoom and focus.
- Review mobile behaviour: book from a real phone and check tap targets and load speed.
- Show fallback contact details: a phone number and e-mail must be visible near the booking button.
- Check privacy handling: confirm your booking form tells customers how their personal information is used and that you have a privacy notice that covers it, in line with POPIA.
What a conversion-focused developer would tell you
Most lost bookings are not caused by the wrong software. They come from a slow page, a vague button and a form that asks for more than it needs. Trim fields to the minimum, make the call to action say exactly what happens next, and keep pages light so the button appears before the visitor gives up. A no-code solution is the right start for most small businesses, and a specialist earns their fee when you have custom rules, integrations or a tracking gap you cannot close yourself. Whatever you choose, wire up measurement and accessibility on day one. Fixing them after launch always costs more.
— Dylan
How we can set up and improve booking on your site
We build websites that turn visitors into bookings, and booking integration is part of that. Our team handles the setup, speeds up the pages around it and gets your analytics ready. You launch with analytics ready. See our Start, Grow and Pro plans and tell us what you need.
FAQ
How do I add a booking to my website?
Pick a method, then add it to your page. The quickest is copying a hosted booking link into a button, or pasting an embed snippet into a custom HTML block. Plugins, APIs and custom builds suit more complex needs.
How do I set up a booking website?
Choose a booking provider, set your services, hours and staff availability, then connect your payment gateway and calendar. Publish the booking page or widget on your site and run a full test booking before announcing it.
Is there a free booking link for businesses?
Many booking providers offer a free tier with a shareable hosted booking link, though free plans often limit features such as payments, reminders or staff members. Check what the free tier includes before you put the link in front of customers.
How do I create a booking URL?
Inside your booking provider's dashboard, look for the option to share or publish your booking page. It generates a public link you can paste into a website button, e-mail signature or social profile.