How do I set up Online Booking on my website?

This article will show you how to add the Online Booking Book Now button to your website and includes guides on installing the widget on popular website builders like Squarespace, WordPress, Wix, and Weebly.

Floating Book Now Widget

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


Code Snippet:

<script src="https://booking-widget.phorestcdn.com/obwidget.bundle.js"></script>

<script>
window.widget = new OBWidget('yourphorestsubdomain')
</script>

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.

Using Your Own Custom Book Now Button

If you prefer to use your own Book Now button, click here to find out how.


Installing the Widget on Popular Website Builders

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

squarespace.png  Squarespace

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

mceclip4.png

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

mceclip0.png

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

shopify.png  Shopify

Go to your Shopify admin page, then click Online StorePages

mceclip0.png

Next, click the page name where you want to add the Book Now widget.

mceclip1.png

Click the Show HTML button > Past the code snippet from the top of this article > Save.

2023-01-12_09-50-09.gif

Note: You will need to replace yourphorestsubdomainin 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 Book Now widget will now appear on that page. Repeat this process for other pages where you want to add the widget.

mceclip2.png

wix.png  Wix

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

mceclip6.png

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.

WixOBScript.png

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.

wordpress.png  WordPress

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.

weebly.png  Weebly
Login to your Weebly account, then click Edit SiteSettingsSEO and paste the code snippet into the Header Code section.
square.png  Square/Squareup

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, www.phorest.com would become www.phorest.com#onlinebookings


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.


Using Your Own Custom Book Now Button

By default, when you add the code snippet to your website, the    will automatically appear. If you prefer to hide this button and use your own customized button instead then you can do so by using the following code snippet:

<script src="https://booking-widget.phorestcdn.com/obwidget.bundle.js"></script>

<script>window.widget = new OBWidget('yourphorestsubdomain', {hide_widget_button: true, custom_button_id: "online-booking-button"})</script>

The custom button will need to have the following code:

<a href="#onlinebookings" id="online-booking-button">Book Now</a>

The <a> tag above can be customised with CSS to match the website style.

Currently, it is only possible to have one custom button per page, as custom buttons on the same page cannot share the same ID.


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?
26 out of 53 found this helpful