How to add online booking to your website (WordPress, Wix and Squarespace)

To add online booking to your website, you need a booking tool that gives you either a link or a piece of code. A link works on any site: put it behind a "Book now" button. Code lets customers book without leaving your site: paste it into a Custom HTML block in WordPress, an Embed code element in Wix or a Code block in Squarespace.

Which one you pick depends on how much of your site you want the booking to take up, and on what your website builder lets you paste. All three options below take a few minutes once your booking page exists.

What do you need before you start?

You need a booking page that already works on its own: your services, how long they take, the hours you're available and the details you ask customers for. Most booking tools have you build this page first and then give you ways to put it on your site. If customers can book at the plain link, they can book from your website too.

Before you put that page in front of more people, book a test appointment for yourself and cancel it again, so you know the times look right. If you travel or clean up between jobs, set a buffer so customers can't book you back to back. And if you have a cancellation or no-show policy, make sure customers can read it before they confirm.

Option 1: a button that links to your booking page

This is the simplest way and it works on every website builder, including the ones that don't allow custom code. Add a normal button or menu item, label it "Book now" or "Book an appointment", and set the link to your booking page's address.

It suits any site and anyone who'd rather not touch code. Customers do leave your site for the booking page, so put your name and logo on it to make clear they're still booking with you.

Put the button where people look for it: in the header or menu, at the top of your home page, and at the end of each service page, rather than only in the footer where it's easy to miss.

Option 2: a button that opens booking on top of your page

Some tools give you a small piece of code for a "Book now" button that opens the booking form in a window over your page. Customers pick a time, confirm and close the window, and they're still on your site.

Use it to keep booking on your own site without giving it a whole page. You need a website builder that lets you paste code; most do, though some only on their paid website plans.

Option 3: the booking page inside your page

The third option puts the whole booking form inside one of your pages, usually a page called "Book" or "Appointments". Customers see your services, pick a time and confirm, all inside your site's design.

It works well when most visitors come to book and you want a booking page that's part of your site. It needs the same code support as option 2, and enough width on the page. Check it on a phone as well as a computer, since plenty of customers will book from their phones.

Where do you paste the code?

Each builder has its own name for the block that takes code. The usual places are:

• WordPress: edit the page, add a Custom HTML block, paste the code and update the page. Some themes and page builders have their own HTML or code widget that works the same way. On WordPress.com, code that includes scripts may need one of the paid plans.
• Wix: in the editor, add an Embed code element (Wix calls the option "Embed HTML"), paste the code, then drag the element to the size you want. Wix keeps pasted code inside that box, so make it tall enough for the whole booking form.
• Squarespace: edit the page, add a Code block and paste the code. Code blocks may only be available on some Squarespace plans; check yours if you don't see it.

Menus in these builders change from time to time, so if a name doesn't match what you see, search the builder's help center for "embed HTML" or "custom code".

After you paste it, open the page on your phone and in a private browser window, and make a test booking from start to finish.

How do you do this with Okayset?

In Okayset you'll find both snippets under Settings › Booking page › Add to your website: one shows your booking page in the page (option 3) and one adds a "Book now" button that opens your booking page on top of your website (option 2). Copy one, paste it where you want it, and customers book without leaving your site. On builders that place the code straight into your page, such as a WordPress Custom HTML block, the frame grows to fit the booking page so there are no scrollbars inside it. Wix keeps pasted code in a box of fixed size, so there you set the height yourself, and the booking page in the page usually works better than the pop-up button. Your booking page has to be published first. The full steps are in Add booking to your website.

Okayset is free during the private beta, and that includes putting booking on your own website. After the beta, putting the booking page on your own website is part of the paid plans (from €12 a month, see pricing); on the Free plan the snippet shows a link to your booking page instead, which still works as option 1.

Whichever option you choose, the booking rules stay the same: Okayset's server checks your hours, buffers and existing bookings every time someone books, so a booking made from your website can't double-book you. You can read more about how that works on the features page.

Which option should you choose?

If your builder doesn't allow code, or you want it done in two minutes, use a button that links to your booking page. If you want people to stay on your site without giving booking a whole page, use the pop-up button. If most visitors come to book, put the booking page inside a page of its own and link it from your menu.

You can also combine them: a pop-up button on every service page and a full booking page in the menu. Whatever you choose, put the same link in your email signature, your Google Business Profile and your social profiles, so every route leads to the same calendar.