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 button

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

<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.

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

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 floating book now script into the Header and Footer sections and click Save.

mceclip5.png

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

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, then copy the settings below and click Apply.

mceclip7.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

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 then 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
Login to your Weebly account, then click Edit SiteSettingsSEO, and paste the code snippet at the top of this article into the Header Code section.

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 button, 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.

To learn about more areas like this in your Phorest system enroll in our Take Bookings Online course in Phorest Academy - online, on-demand, and on-the-go learning for busy salon professionals.

Was this article helpful?
6 out of 13 found this helpful