With 10to8 it is possible to embed your customer booking page into your own website. This guide outlines some of the more common ways that you can embed your booking page and take appointments directly from your own website. 


Sections


HTML Widget

The most common way to embed 10to8 into your website would be by using our HTML Widget. We provide a copy & paste code for you, making this process as simple as possible!


HTML Widget

If you wish to offer all of your booking page services from your website, then follow these steps: 


  1.  Go to Configuration > Online Booking > Widgets in your 10to8 account.
  2.  Click onto HTML Widgets. This will open the HTML Widget page in your account. Click this in your account.
  3. Here, if you scroll down to the HTML Code section, you will find a ready to use code snippet, that can be copied and pasted into your website's code. Adding this code to your website would add everything you see under the 'Preview' section of this page, to your website. 
  4. If you wish to adjust the colours of the buttons to better match that of your website, you can do so from the Customization section of this page. You will need to use the updated HTML code to see the effects in your widget.


How To Remove The Scroll Bar From Your HTML Widget


If you are seeing scroll bars on your embedded booking page and would like to remove them, here's how you achieve this:


Find the following line of code in your generated HTML snippet:


<script> window.TTE.init({ targetDivId: "TTE-xxx", uuid: "xxx"}); </script>


And add maxHeight: "initial" to the end of the code, before the parenthesis, like so:


<script> window.TTE.init({ targetDivId: "TTE-xxx", uuid: "xxx", maxHeight: "initial" }); </script>


This will remove the scroll bar from your embedded booking page. 


Service-Specific HTML Widget

If you wish to only embed a single service into your website, this is also possible. 


Using the HTML Code found under Configuration > Online Booking > Widgets in your account, look for the following information:


window.TTE.init({

  targetDivId: "TTE-457429ef-e98b-4891-8f14-ef6d352e783a",

  uuid: "457429ef-e98b-4891-8f14-ef6d352e783a"

});


Next, identify the ID of the service you wish to limit your widget to. To find your service ID, head to Setup > Services in your account, click onto the relevant service, and then look for the Direct link to service section. The string of numbers at the end of this link is your service ID. 


Now back to the HTML code snippet from above. You will need to add a new line to this snippet, in this format:


window.TTE.init({

  targetDivId: "TTE-457429ef-e98b-4891-8f14-ef6d352e783a",

  uuid: "457429ef-e98b-4891-8f14-ef6d352e783a",

  service: (insert your string of numbers here)

});


Now embed the full HTML Snippet, including your changes, into your website. You will find that it is limited to just the service you have chosen.


HTML Button

If you wish to embed a button into your website, that links to your booking page, you can do so by following these steps.


  1. Head to Configuration > Online Booking > Widgets in your 10to8 account.
  2. Click on the Buttons option.
  3. Now customise the colours of your button in the Customization section.
  4. You can also limit the button to a particular service, and change the text of the button to suit your needs.
  5. Further down the page, you will see a live preview of your button, as well as the HTML code snippet you can embed into your website.


WordPress Plugin

We offer a WordPress Plugin, which you can find out more about by clicking here.


Once you have installed the plugin, and activated it, head to Configuration > Online Booking > Widgets in your 10to8 account, and click on the WordPress option. This will take you to a new page, where you can find your 10to8 shortcode for your plugin.


how it appears in product, on the 'widgets' page.


Facebook Integration

You may wish to integrate your 10to8 bookings into your Facebook business page. 


Due to Facebook's policy on Page Tabs, you are required to have over 2000 likes on your page in order to use this feature. 


If you have met these criteria, head to Configuration > Online Booking > Widgets, click on the Facebook option, and follow the hyperlink found there:


CLick this from your account to begin the process


Follow the steps from this link to add the ability to take bookings from your Facebook Page.



Weebly Plugin

A Step-By-Step guide for adding the Weebly Plugin to your website can be found by going to Configuration > Online Booking > Widgets and clicking on the Weebly option.


Visit our Blog!

If you want to know more about the power of WordPress have a read here!


For More Help

If you are experiencing any issues, or are looking for more information, please get in touch! Click here to contact us.