How do I set up Online Booking on my website?

This article will show you how to add the Online Booking feature to your own website, and includes guides on how to install the widget on popular website builders like Squarespace, WordPress, Wix, and Weebly.

Floating Book Now widget

To add the floating Book Now widget to your website, paste the code snippet below into the Footer of your website


Code Snippet:

<script src=""></script>

window.widget = new OBWidget('yourphorestsubdomain')

Note: You will need to replace yourphorestsubdomain in the code above with your Phorest online booking subdomain name. You can find your Phorest subdomain name at the end of your online booking direct link.

If you are using a popular Web Builder CMS, below are some step-by-step instructions on where to insert the code.


Log in to your Squarespace account, then hover over your website under the Websites tab and click Edit Site.


Click Settings from the left-hand sidebar > Advanced > Code Injection, then enter the code snippet into the Header section and click Save.


Note: Your domain will need to be live in order for the floating Book Now widget to be displayed.


Log in to your Wix account, then go to Settings > Tracking & Analytics under the Advanced Settings section to open the Tracking Tools page. Click + New Tool, then Custom


Paste the code snippet from the top of this article, then copy the settings below and click Apply.

Note: You will need to replace yourphorestsubdomain in the script code with your own Phorest online booking subdomain. You can find your subdomain at the end of your online booking link. For more info, click here.


The scripts have now been added and all you will need to check is the live site to ensure the floating book now widget is shown and works. 

Note: Your domain will need to be live in order for the floating Book Now widget to be displayed.


Log in to your WordPress account, then click Plugins from the sidebar menu > Add New, then search for and install the Head, Footer and Post Injections plugin

Once you've installed this plugin, click Installed Plugins from the sidebar and click Activate under the Header, Footer and Post Injections plugin.

Next, go to Settings > Header and Footer and paste the code snippet into all sections on this page except for the 'Only On The Home Page' section. Mobile sections will need to be included. To finish, click Save once you've copied the code snippet into these sections.

Note: Your domain will need to be live in order for the floating Book Now widget to be displayed.

Login to your Weebly account, then click Edit SiteSettingsSEO and paste the code snippet into the Header Code section.

To add your own header or footer code to your Square Online site for third-party integrations and tracking:

  1. On your Square Online Overview page, go to Settings > Tracking Tools.
  2. Select Add new code.
  3. In the popup window, give the code a name, like 'Book Now Widget', and add the code into the corresponding field.
  4. To place the code in the header, select head. To place the code in the footer, select End of body.
  5. Select Save when finished.
  6. Publish your site from the Square Online site editor to see the changes live.

Automatically Opening the Widget at Page Landing

You can cause the book now widget to automatically open when landing on a page by adding #onlinebookings to the end of the page URL.

For example, would become

Direct link to Online Booking

If you have an existing book now button on your website and don't want to use the floating Book Now widget, you can hyperlink your Phorest online booking direct link behind your existing booking button.

Use of iFrames

We do not recommend the use of iFrames on websites over the floating Book Now widget, because the floating Book Now widget is typically considered a better user experience overall which will help with online booking conversion rates.

If you still wish to embed your Online Booking page in an iframe on your website, check out this guide to find out how.

The salon ID/URL, from which your Online Booking subdomain is derived, can be found in Online Booking Settings

  Facebook & Instagram Setup

Looking to link your Online Booking page on Facebook and Instagram? Check out this guide.

Was this article helpful?
21 out of 35 found this helpful