Taking Bookings From Your Website – A Technical Guide

Warning! Here be dragons! Experience in web development is assumed.

10to8 appointment booking software has a booking widget that can be incorporated into any HTML website. It comes with all the same features and power as the booking pages hosted on https://10to8.com/, so it is possible for developers to recreate the same UI and UX that we offer.

It is possible for developers to recreate the same UI and UX that we offer. Click To Tweet

You can get the code for your account by clicking here. As an example, here is the code for a booking widget that we use for managing sales calls at 10to8:

<a id="TTE-d7b9b585-f98c-406c-944a-99ffcf393414" href="https://10to8.com/book/contact/" target="_blank">See Online Booking Page</a>
<script src="https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js"></script>
<script>
  window.TTE.init({
    targetDivId: "TTE-d7b9b585-f98c-406c-944a-99ffcf393414",
    uuid: "d7b9b585-f98c-406c-944a-99ffcf393414"
  });
</script>

Let’s dive in and see what this does!

The 10to8 booking widget consists of JS and HTML code, which all work together to generate the UI and UX. The JS code adds a number of elements to your website, the most important of which is an iframe that contains a page from https://10to8.com/ showing the booking flow, and the HTML code provides the mount point.

The blue <a id=…></a> tag is the target where the iframe will be injected. The green <script src= …></script> tags loads the 10to8 JS code that can add iframes, and the red <script> tag bootstraps and configures the widget, injecting the iframe in at the target.

Now that you know how it works, let’s have some fun with it!

Extra configuration options

You can pass additional options to the booking flow by adding them to the window.TTE.init({…}) function call. Here are a few:

  • service: causes the booking flow to select a particular service automatically, and to skip the service selection screen
  • staff: selects a particular staff member by default on the staff/location selection screen
  • location: selects a particular location by default on the staff/location selection screen

We’ll be adding more options in future too, so let us know what might be useful.

Having multiple widgets on the same page

You can add multiple widgets to a single webpage, and each one can have different configuration options or even be for completely different 10to8 accounts.

To do so, you need to split up and slightly modify the blue <a id=…></a> tag, the green <script src= …></script> tag and the red <script> tag.

  1. Move the green <script src= …></script> tag to the <head> tag in your website, as this only needs to be included once, even for multiple widgets.
  2. For each place within the page that you want to have a widget, insert the blue <a id=…></a> tag and the red <script> tag.
  3. Choose a new id=… value for the blue <a id=…></a> tag, and set the corresponding targetDivId: to match.
  4. To select a different 10to8 account, also change the uuid: field.

So, for example, your page might look like this:

<html>
  <head>
    <script src="https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js"></script>
  </head>
  <body>
    <h1>Book an Initial Consultation</h1>
    <a id="initial-consultation" href="https://10to8.com/book/contact/" target="_blank">See Online Booking Page</a>
    <script>
      window.TTE.init({
        targetDivId: "initial-consultation",
        uuid: "d7b9b585-f98c-406c-944a-99ffcf393414",
        service: 123
      });
    </script>
    <h1>Book a Follow-up Appointment</h1>
    <a id="follow-up-appointment" href="https://10to8.com/book/contact/" target="_blank">See Online Booking Page</a>
    <script>
      window.TTE.init({
        targetDivId: "follow-up-appointment",
        uuid: "d7b9b585-f98c-406c-944a-99ffcf393414",
        service: 321
      });
    </script>
  </body>
</html>

This page will show two booking widgets, each one for a different service offered by the business.

If you want to know more, contact us at help@10to8.com.

Start Taking Customer Bookings Online Today

Join 35,000 other businesses Worldwide that trust 10to8 for their appointment scheduling needs. Free and easy setup, get started today!

Richard is the MD and a director of 10to8, responsible for day to day running of the company. He has been with 10to8 for 4 years, joining after completing a PhD at Oxford. Richard previously worked in the City, and at several technology companies and startups.

Looking For The Best Scheduling Software?

See how we compare with our up-to-date comparison guide!

Follow Us On Facebook

Be the first to hear about our latest new features, along with tips and tricks to grow your business!

Facebook Comments

Pin It on Pinterest

Share this post!

Share it with friends or businesses that can find this useful