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.
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.
Go to your Shopify admin page, then click Online Store > Pages
Next, click the page name where you want to add the Book Now widget.
Click the Show HTML button > Past the code snippet from the top of this article > Save.
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.
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.
To add your own header or footer code to your Square Online site for third-party integrations and tracking:
- On your Square Online Overview page, go to Settings > Tracking Tools.
- Select Add new code.
- In the popup window, give the code a name, like 'Book Now Widget', and add the code into the corresponding field.
- To place the code in the header, select head. To place the code in the footer, select End of body.
- Select Save when finished.
- 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.