How can I setup online booking on my website? (floating book now widget)

This article will show you how to add the Online Booking feature to your own website

Note: If you would like Phorest to integrate the Online Booking system on your website for you, please click here.

Floating Book Now Button:

The Floating Book Now button/widget should be added to every page of your website. Follow and repeat the steps below to do this:

FTP

To add the online booking page to your website the following snippet of code has to be put on the index page, right before the end body tag. You will need to replace 'insertsalonidhere' with your salonID/subdomain. You can find your salonID/subdomain at the end of your online booking direct link.

'Script src' code is to be placed before the first body tag after <styling> tab

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

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

Here are some step-by-step instructions on where to insert the code using some popular Web Builder CMS:

Squarespace

  1.  Go to Settings 
  2. Then Advanced
  3. Then Code Injection
  4.  Then Copy & paste your Code into the Header

Wix

  1. Click Manage Website 
  2. Then Tracking and Analytics
  3. Then New Tool -> Custom 
  4. Then Paste in Code Snippet

Weebly

  1.  Edit Site 
  2. Then Settings (in navigation)
  3. Then SEO 
  4. Paste entire code excerpt into Header Code

WordPress

Integration with WordPress requires downloading a plugin called 'Insert Header and Footer Scripts'

  1.  Select Plugins from the Dash 
  2. Then Add New 
  3. Search for Insert Header and Footer Scripts then Install 
  4. Then click Activate
  5. Click Settings and then Insert Header and Footer Scripts
  6. Paste in the code for the Floating Button

Link to Dedicated Online Booking Page

If the Floating Book Now Menu is added to your website, it's not necessary to add a separate 'Book Online' tab/button and link this to a dedicated page. 

If you have an existing Book Online/Book Now button on your website that you wish to continue to use, follow the steps below:

Firstly install the Floating Book Now button as outlined above. 

Once this is done, use your website URL and add the following link structure:

www.yourwebsiteurl/#onlinebookings

This will open your booking page as a sidebar on your website. 

Use of iFrames

We do not recommend the use of iFrames on websites for a number of reasons but mainly because these pages will be marked as unsecured by Chrome and Safari from July 2018 onwards and your clients will be unable to book online. The other reason is that the use of Floating Book Now buttons for online bookings have been proven to convert better. 

If for some reason you wish to use an iFrame on your website on your online bookings, following the steps outlined under 'Link to Dedicated Online Booking Page' will give you the same effect. 

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

 
Was this article helpful?
0 out of 0 found this helpful