Embed Online Bookings into WordPress


If you're having trouble embedding your Simple Salon Online Bookings into WordPress, you can use the following article to help guide you through the setup.

While you're more than welcome to use this article as a tool to help you setup your online bookings, if you're having trouble, it's best to consult to your local IT Expert or Hosting Provider.

You'll firstly need to make sure that you can login to your WordPress site and edit your pages.

To login to WordPress, you'll need to login to a page similar to the page you can see below.


 Once you've logged in, you'll be directed to your Dashboard.


Creating your Bookings Page

At this stage, you'll either need to create a new page for Online Bookings, or edit an existing page for Online Bookings.

If you already have an existing page, please feel free to follow these instructions, however, you may need to make some alternative changes based on the content on your page.

To create a new page, click on the Pages option in the left-side panel which will load the Pages view.


To add a new page, click the Add New button next to the Pages heading, or click the Add New link which has appeared under the Pages button you clicked in the previous step.

This will then load a blank page where we'll embed the Simple Salon Online Bookings.

You could call this page, for example, 'Bookings'.

Older versions of WordPress should appear similar to below


Newer versions of WordPress should appear similar to below


Adding in your Code

To embed the Simple Salon Online Bookings, you'll need to create a code section in WordPress.

Older versions of WordPress

To do this, make sure you've selected the Text tab, then click on the code button which is located just above the blank text box.

Both the 'Text' and 'code' options can be seen in the following picture:


Clicking the code button will then add the <code> tag to the text box, which is your page:


Newer versions of WordPress

Click on the three dots at the top right of the page and select 'Code Editor'



If you haven't already, you'll now need to copy your Simple Salon Online Bookings Embed URL from Simple Salon.

You can do this by opening up a new tab or page in your browser (ensure you leave your WordPress page open), logging in to Simple Salon and navigating to Online > Admin > General Settings and clicking the Copy Embed Code link in Simple Salon.


Once you've copied the code, head back over to the WordPress page we were editing earlier, and paste the link under the<code> tag.


To finish adding in the code, click the /code button to close the code tag, which will add the </code> tag to underneath the code you pasted from Simple Salon.


Newer versions of WordPress

Simply paste the code in the content box underneath the page heading:


Great! Now that you have your link in your WordPress site, click the Preview button on the right-side panel to see how it looks.




Hmm, we followed the instructions but our page doesn't quite look right...


Don't stress. This just means you'll need to edit the styling of the page.

In this example, we will be expanding the Simple Salon Online Bookings to take up the full width and height of the page.

To edit your page, click the Customise link at the top of the preview page we were just on.


Your page should then load with a panel for customising on the left-hand side.

To change the style of the page, click the Additional CSS button at the bottom of the menu.


After clicking on the Additional CSS button, you'll need to enter in some styling so that the iframe for the Simple Salon Online Bookings displays across the entire page.

The following page will show you the example CSS code we have entered into the left-side panel, and the display of the page after we have entered the code.


You can also copy and paste the code into the left-side panel using the code directly below:

iframe {
position: absolute;
left: 0%;
width: 100%;
height: 100%;
top: 0%;
background-color: white;
z-index: 100;

Note: Please only copy the content between the 'iframe {' and '}' brackets.

Once you've pasted the code in, your page should adjust to look similar to the above page.

When you're happy with how your page looks, click the Publish button to save the changes.

If you have any questions, please send them to us via the Submit a Request option in your Help & Support page.

Have more questions? Submit a request
Powered by Zendesk