Embed Online Bookings into WordPress

Follow

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.

wp-admin.png

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

wp-landingpage.png

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.

wp-pages.png

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'.

wp-pages-newpage.png

Adding in your Code

To embed the Simple Salon Online Bookings, you'll need to create a code section in 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:

wp-pages-newpage-codebtn.png

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

wp-pages-newpage-codebtn-clicked.png

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.

admin_general_settings.png

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.

wp-pagesp-newpage-iframe.png

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.

closeCode.png

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.

wp-previewandpublishbtn.png

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

wp-previewpage.png

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.

customise.png

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.

customise-menu.png

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.

additionalCSS.png

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 '{' 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