How to integrate the online booking into your website

There are a number of different options for integrating online bookings into your own website, Facebook page or stand-alone.

Click on Settings in the side menu.
Click on Online Booking Settings.
Once you are in the Online Booking Settings, click on the Integrations tab to show you all the various options you have.
Select which option you want to integrate with your site.

Preset options

The default online booking will enable all location, services and staff to be booked. There may be a time however when you want to create a booking button or link that is more specific. What this means is if you wanted to create a different booking button for each location you could by choosing that location in the preset options. Or, if you wanted to send out a booking link in an email for a specific service you have an offer on you could do that as well.

By choosing any of the preset options it will automatically update the code in the button, link or widget sections so you can just copy and paste the code into your website.

Button

The button integration option will display a button on your webpage that people can click on to display a pop-up booking screen. By default, you can choose a dark or light version of the button. If you want to have the button a different colour you can use custom CSS or ask our support to help you do this.

When inserting the button you will need to have some knowledge of how your website is built and be able to edit or insert chunks of HTML. Firstly you will need to insert the initial line of code into the <head> section of your website. If you are not sure how to do this you may need to ask your website developer.

Then the second line of code should be inserted into your website in the position you wish the button to appear.

You can quickly check how the booking will appear by clicking the button in the Preview section.

Link

The Link integration option is quite similar to the Button option. When creating a link you can choose either a Regular link or a Popup link.

If you choose a regular link it will generate a link (also called a Url) that you can then insert into a webpage or send to someone in an email. This is most useful if you want to send the link to people in some marketing email or SMS. The link will look something like this.

If you chose the Open in popup option for the link then it will generate something that is very similar to the button integration will give you. The only difference is that it will not be styled like a button, but rather will be styled like a regular link. The booking will open in a popup the same way a button would.

Widget (iframe)

A Widget (iframe) is a bit of code that can be embedded into a web page and make the booking screen look as if it is part of the page. When setting up the widget you should enter the height and width of the widget in pixels so that it fits into the page you wish to place it in. It may take a couple of tries before getting the size to look right on your website.

Once you have entered the size of the widget that you want then you can copy and paste the code into your web page as you would with any of the other integration options.

While you can choose whatever integration method you wish, the Button or Link options will give you the best result on mobile devices as they are responsive, meaning they work on all screen sizes. So we would recommend using these over the Widget (iframe) option.

Facebook & Instagram

It is quite common for many businesses to develop a community with their clients, and garner much new business, via their Facebook page.

To learn how to add a Book Now button to your Facebook page follow these instructions.

You can also add your booking link to your Instagram profile using these instructions.

Mini Website

If you go to your own booking page you will notice that along with the booking form there are various other screens the clients can click on. For example, there is an About page where they can see your staff and their profiles, a Services page where they can see your services and a description of each of them, and finally, there is a Contact page where they can make contact with you and find your business address and information.

Find out here how to set up the information on your mini website.