Website widget
Booking on your own website, without a developer.
Three ways to add it, on an example clinic's website
Everything a patient books this way works like your normal booking page: the same times, the same confirmation emails, the same payments.
Booking calendar. The booking steps sit inside your page and grow to fit, so there is no box to scroll inside.
01 · Formats
A calendar, a button or a link.
Booking calendar
Sits in your page and grows to fit, so there's no box to scroll inside. Best for a dedicated “Book online” page.
Book now button
In your clinic colour. It opens booking full screen on a phone and in a centred window on a computer, and closes with the cross, Esc, the Back button or a tap outside. Without JavaScript it simply opens your booking page in a new tab.
Link
For your menu, emails, social media or Google profile. It opens your full booking page.
The button and link wording can be changed, up to 40 characters, for example “Book a consultation”.
02 · The code
Start patients in the right place, then copy two lines.
Open on the whole clinic, one service, one location or one practitioner. The calendar and the button are two lines of code; the link is just a web address. If something you linked to is archived later, booking simply starts at the first step.
Patients see firstSports massage already chosen. Good for a page about one treatment.
Booking calendar. Paste it where the calendar should appear.
<div data-bookingsimple-widget data-service="2"></div>
<script data-cfasync="false" src="https://yourclinic.bookingsimple.co.uk/widget.js" async></script>Book now button. In your clinic colour, with your own wording if you like.
<a href="https://yourclinic.bookingsimple.co.uk/?service=2" target="_blank" rel="noopener" data-bookingsimple-popup style="display:inline-block;padding:12px 24px;border-radius:8px;background:#c2410c;color:#ffffff;font-family:inherit;font-size:16px;font-weight:600;line-height:1.25;text-decoration:none">Book now</a>
<script data-cfasync="false" src="https://yourclinic.bookingsimple.co.uk/widget.js" async></script>Link. For a menu, an email, social media or your Google profile.
https://yourclinic.bookingsimple.co.uk/?service=2- These are examples for a clinic at yourclinic.bookingsimple.co.uk, and the numbers in them are made up. Your own code, with your address and choices, is in Admin, Website widget.
- The script is about 5 KB. If a page has a calendar and a button, it needs the script line only once.
- Changing your hours, services or prices never needs new code.
03 · Site builders
Works with the site you already have.
Written steps for WordPress, Wix, Squarespace and Webflow are on the widget page in your admin. In short:
WordPress
- Edit the page and add a Custom HTML block where you want booking to appear.
- Paste the code, then Update or Publish.
Elementor: use the HTML widget. Classic Editor: paste in the Text tab. On WordPress.com, code blocks need a Business plan or higher; on other plans, use the link.
Wix
- The link is the most reliable choice: add a Wix button linked to your booking address, opening in a new window.
- For the calendar: Add, Embed code, Embed HTML. Paste the code and make the box about 900 pixels tall.
Wix keeps code in a fixed-size box, so use a normal Wix button with your link rather than the Book now code.
Squarespace
- Edit the page and add a Code block where you want booking to appear.
- Paste the code and save the page.
Some Squarespace plans don't run code blocks. If nothing appears, use the link with a Button block.
Webflow
- Drag a Code Embed element onto the page.
- Paste the code, choose Save & Close, then publish the site.
Webflow doesn't run the code inside the Designer, so check it on your published site.
Any other website
- Paste the code into your page's HTML where you want booking to appear.
Many builders don't run code in their editor or preview, so check the published page. If a cookie banner blocks embedded content, set it to allow your booking address.
04 · Payments and privacy
Payments work inside it. Patient details stay out of your website.
- Card paymentsCard payments and the bank's 3-D Secure check work inside the widget. If you take card payments, the Book now button shows that check best.
- Apple Pay and Google PayNot promised yet. BookingSimple takes card payments. Whether a wallet button appears depends on the patient's device and Stripe, and inside another website it may not.
- Patient detailsThe widget runs on your BookingSimple booking page, not on your website. Patients' names, email addresses and phone numbers are never passed to your site.
- Only booking pagesOnly your public booking pages can appear inside other websites. Your staff and admin pages can't.
- EmailsLinks in patient emails always open the full booking page, never the widget.
05 · Optional
Count bookings in your own analytics.
After a booking, your page receives a “booked” event with the booking reference, the service and the time only, never the patient's name or contact details. BookingSimple adds no analytics of its own.
Even without names, a booking linked to an analytics cookie can say something about someone's health. If any of your services are sensitive, send your analytics tool only the event, not the service.
window.addEventListener('bookingsimple:booked', function (event) {
// event.detail holds reference, service_id and start_at only
});See it working in 15 minutes.
A walkthrough on a working example clinic: a booking, the reception calendar and payments. The button opens an email, and we reply within one UK business day.