If you have a WordPress website and want to easily take and manage your bookings, then you’ll be pleased to know that 10to8 is easily integrated with WordPress. We even have our own plugin! So, if you’re wondering just how to set up 10to8 on your website, follow these simple steps to get started.

Please not, this information only applies to WordPress.org and not to WordPress.com sites.

Download and Install the Plugin

First, you’ll need to download and install the 10to8 plugin onto your WordPress account. To do this, login to WordPress and go to ‘Plugins’ from the left-hand menu and then click ‘Add New’. Type ‘10to8’ into the search bar and it will bring up the plugin. Click ‘Install Now’ and then hit ‘Activate’ to trigger the plugin on your site. 

Alternatively, you can download the 10to8 WordPress plugin by following this link: https://wordpress.org/plugins/10to8-online-booking/ and click ‘Download’. 

It will then save the plugin to your computer as a ZIP file. To put this into your website, simply go to ‘Plugins > Add New’ from your WordPress dashboard, click ‘Upload Plugins’ above the search bar and add the ZIP file. 

Within 10to8, find your WordPress shortcode

Next, you’ll need to go back to your 10to8 account. Go to ‘Online Booking > Widgets’ and you should see a ‘WordPress’ section. Click this to get your unique shortcode. A shortcode is simply a special tag that you enter into any page on WordPress, that gets replaced with different content when you view the live site. 

Widgets panel

Once you have your code, it can be copied into any one of your WordPress pages and will bring up your booking page, for customers to easily schedule appointments with you directly from your website.

Setting up 10to8 with different WordPress builders

Depending on how you’ve built your website, you may need to insert the shortcode slightly differently. Here’s how to do it with a range of different tools:

If you are using a page builder like Divi or Elementor - 

Page builders are great because you can really easily add different blocks and widgets which allow you to insert various snippets of code without it being too complicated. Using a widget also means that you can view how the shortcode looks without having to go into preview mode in WordPress. To add your shortcode with a page builder, first you’ll need to go into your edit mode by clicking ‘Edit with Elementor’ or ‘Edit with Divi’ at the top. This will then bring up all your different blocks and widgets on the left-hand side. Find the ‘Shortcode’ widget and drag and drop this into the place that you would like it on your webpage. Then, simply paste your copied code into the text box and your booking page will appear!

If you are using Gutenburg blocks -

Although slightly less user friendly than a page builder, Gutenberg blocks are no less complicated and it’s just as simple to add your 10to8 shortcode. Once again, you’ll need to find the webpage that you’d like to add your booking page too and hit ‘Edit’. This will take you to the Gutenburg editor. From there, hit the little plus symbol to bring up the blocks. In the search bar, type ‘Shortcode’ and drag and drop the block to where you’d like your shortcode to appear. Once you’ve done that, all you need to do is add your code!

If you are using the Classic Editor -

Despite the Classic Editor being the most complicated of all the WordPress editors, adding the 10to8 shortcode is, once again, fairly straightforward. Find the page where you want to add your code and hit ‘Edit’. Then, simply paste the code, exactly as you see it in 10to8, into the text on your page. Make sure the shortcode has its own line, however, or it won’t work. 

With all of these methods, don’t forget to save your changes! You can then view the completed page by going to your ‘Preview’.

Adding booking buttons to your WordPress page

As well as the booking page widget, you can also add specific buttons to your WordPress website that will either take your customers to your booking page within 10to8 where they can view all of your services, or it can just direct customers to a single service, perfect for a dedicated page.

To add a button to your WordPress page, first, go back into 10to8 and go to ‘Online Booking > Booking Buttons’. 

Booking button panel

Here, you can edit your button settings, decide on which service the button should go to, what the button should read and customise it to your own brand to coordinate it with your website. You can also preview exactly what the button will look like once it’s on your webpage. Once you’ve customized your button settings, copy the code to your clipboard.


Using buttons with page builders -

If you are using a page builder or Gutenburg, the next step is very simple. Follow the exact same method as you would use to add the shortcode (detailed above) but instead of searching for a shortcode widget or block, search for an HTML block instead. Then, paste the code into the HTML field and save the changes.

Using buttons with the Classic Editor -

If you are using the Classic Editor, it will be slightly different. You’ll still need to access the Edit mode, however, instead of using the ‘Visual’ editor, select the ‘Text’ editor in the top right-hand corner. Then, once again making sure that the code is on a new line, paste the code into the editor and hit ‘Save’. This will then show the button in the preview.


You can follow this exact same process with the HTML code when you go to ‘Online Booking > HTML Widgets’ within 10to8, however, with a WordPress website, it’s much easier just to use the shortcode.

If you’re having trouble using 10to8 with your WordPress website, feel free to get in touch with us at help@10to8.com.