If you'd like to embed your 10to8 booking page into your own website, you certainly can!
You can embed your booking page using HTML widgets, WordPress and Facebook. This guide outlines how to use each of these options.
Note: this guide contains some lines of HTML. To read all of the text within them, you can scroll through them horizontally.
SECTIONS:
How to Embed With HTML Widgets
How to Remove the Scroll Bar from Your HTML Widget
How to Create a Service-Specific HTML Widget
How to Embed With HTML Widgets
Most commonly, 10to8 is embedded via our HTML widgets option. We provide a ready-made code for you to copy and paste.
If you'd like to embed your booking page into your website and offer all of your services from there, follow the steps below.
1. Head to 'Configuration' > 'Online Booking' > 'Widgets' and click 'HTML Widgets'.
2. Scroll down to the 'HTML Code' section. Here you'll find your ready-made code snippet. This is ready to use, and can be copied and pasted into your website's pre-existing HTML code. Adding this code snippet will embed everything you see under the 'Preview' section further up the page.
3. If you'd like to customize the colors of the buttons within your embedded booking page, scroll up to the 'Customization' section and use the color picker to select your button, progress indicator, background and foreground colors. You'll see your selections reflected in the 'Preview' section below. Your HTML code snippet will then update, and you'll need to use this version of the code to see your chosen colors.
How to Remove the Scroll Bar from Your HTML Widget
If you're seeing a scroll bar within your embedded booking page and want to remove it, follow the steps below.
1. Find the following line of code in your generated HTML snippet:
2. Add maxHeight: "initial" to the end of the code, before the parenthesis:
The scroll bar within your embedded booking page will then be removed.
Note: using maxHeight: "initial" will mean that your widget displays at full height - as tall as it needs to be to include all of your services (with no scrollbar).
To reduce and alter the height of the widget, state the specific pixel height you'd like to use instead, e.g. maxHeight: "300px".
When a particular maxHeight isn't specified, the default is 800px.
How to Create a Service-Specific HTML Widget
If you'd like to embed only a single bookable service into your website, follow the steps below.
1. Using the HTML code snippet found under 'Configuration' > 'Online Booking' > 'Widgets', look for the following information:
2. Next, identify the ID of the service you wish to limit your widget to. To find the service ID, head to 'Setup' > 'Services', click the relevant service, then look for the 'Direct link to service' section. The string of numbers at the end of this link is your service ID.
3. Now, you'll need to add a new line to the HTML code snippet, in this format:
4. Paste the full HTML code snippet, including your changes, into your website. You'll find that your embedded booking page is now limited to the specific service you've chosen.
How to Embed a Booking Button
If you'd like to embed a button into your website that customers can click to head to your booking page within 10to8, follow the steps below.
1. Head to 'Configuration' > 'Online Booking' > 'Widgets', then click 'Buttons'.
2. Pick the colors you'd like to use for your button under the 'Customization' section. Here you can also change what the button says, and limit it to a particular service if you like. You'll see a preview of your button a little further down the page, under the 'Preview' section.
3. Once you're happy with your button, scroll down to find the HTML code. You'll need to copy and paste this into your website to embed your button.
How to Embed With WordPress
10to8 offers its own WordPress plugin. You can find the link to download it here.
Once you've installed this plugin into your WordPress site and activated it, head back to 10to8 and go to 'Configuration' > 'Online Booking' > 'Widgets' and click 'Wordpress'. This will take you to a new page where you'll find the 10to8 shortcode for your plugin.
How to Embed With Facebook
If you use Facebook for your business, you can embed your 10to8 booking page there, too!
Note: Due to Facebook's policy on page tabs, your business must have 2000+ likes on Facebook in order to use this feature.
To embed your booking page into Facebook, head to 'Configuration' > 'Online Booking' > 'Widgets' and click 'Facebook'.
Click the small 'i' icon next to 'Facebook Bookings' at the top of the screen, and you'll be presented with a link to a set of instructions. Click the link, follow the instructions and you'll be good to go.
Need More Help?
We hope you've found this guide helpful! If you have any questions, don't hesitate to reach out to our support team who will happily assist you further.
Visit Our Blog!
Read more about the power of using 10to8 with WordPress here.