Embed Online Bookings into Joomla


If you run your website based on Joomla, the guide below can be used to help you embed your Simple Salon Online Bookings into your site.

If you have any difficulties or are unsure how to proceed, it's best to get in contact with your web designer, or IT professional who helped you set up your site originally.

Logging In

To begin this process, you'll need to login to your site. As you can see below, we have arrived at the login page for our Joomla site.


If you are unsure how to reach this page, you'll most likely need to enter in your url (For example, ' with 'administrator' or 'administrator/index.php attached to the end).

In full, your URL would look something like:


Successful Log In

If you've successfully logged in, you're well on your way to embedding your Online Bookings. The next step is to create (or edit) an existing page, for the purpose of Online Bookings.

Before we do this, we need to ensure that we can paste code onto your page. To do this, click on 'System' > 'Global Configuration'.


When the Global Configuration page loads, in the 'Site Settings' section, change the 'Default Editor' to 'Editor - CodeMirror'.


Click 'Save' to update the changes.


Note: You may need to repeat these steps and change the 'Default Editor' to a different editor to the one we have selected.

This will depend on what you can see in the following steps.

Create a new page

To create a new page, click on 'Content' > 'Articles' > 'Add New Article'.


On the following page, you might like to name the 'Title' section 'Online Bookings'.


Copy Embed Code

So far, so good! We now need to copy our Online Bookings 'Embed Code' from Simple Salon, then insert the 'Embed Code' into Joomla!

Click here to find out how to copy the Online Bookings 'Embed Code' section.

When you have successfully copied the 'Embed Code', you'll need to paste this code onto your new page.



You will then need to paste the code you have copied earlier, into this window.

On an Apple MAC you can retrieve this data by holding down the Command key () and clicking the 'V' key to paste the link when needed.

For a Windows PC this is done by holding down 'ctrl' and clicking the 'V' key.

Your window should now look similar to the window below.


Saving and Previewing the Page

We're now at a point where the code should be embedded, however, we're not sure what it will actually look like on our site. It's time to preview our page.

To preview the page, change the 'Status' to 'Published'.


And click 'Save' at the top left of your page.


After you've clicked 'Save', click the 'Close' button.


We now need to link our new page so that we can easily see it when we reach the site. To link the page to our menu, click on the 'Menu' > 'Main Menu' links.


Note: You can complete this process for as many menus as you would like.

When the page loads, you can name the 'Menu Title' area 'Online Bookings'.


You'll also need to click on the blue 'Select' button as shown above. A pop-up will then load, and you'll need to select a type such as 'Single Articles' within the 'Articles' section.


After you've selected an option, you'll be able to choose the article we created earlier by clicking 'Select' as shown below.


And then selecting our article ('Online Bookings' was the article we created earlier).


When you're returned back to the menu area, click 'Save'.


To check if the menu item has saved, click 'Close' then click on 'Menus' > 'Main Menus'.


You should then be able to see all the menu items, including the 'Online Bookings' item we just created.


At this point, load into your site as a client would, and you should then be able to see your 'Online Bookings' link. Click on it to show your bookings site.


Great - we now know that the Online Bookings is displaying, however, as you may have noticed, it's not displaying how we may want it to display.

For example, we may want it to take up most of the space on our page. We'll now need to do some basic CSS styling, so our page displays the way we'd like.

Styling the Online Bookings page

To re-style the Online Bookings page, you'll need to head back into your account (You can do this via the login screen as shown at the start of the article) and then by clicking on 'Content' > 'Articles'.


To re-edit the page, click on the 'Online Bookings' link.


When the page loads, you can enter in code similar to the code below.



Our code is currently as follows:

<iframe src="" width="400" height="600" border="0"></iframe>
iframe {
position: absolute;
width: 75%;
height: 80%;
top: 20%;
background-color: white;
left: 12.5%;

Remember to click 'Save' to update the changes.

When you go back to view your page, you should now be able to see that your page is much more appealing!


If you're still unhappy with the style, have a play with the numbers in the '<style></style>' tags.

If the style completely changes, use the code above to reset your page, then try again.

Great! Your clients should now be able to book in with you online. Congratulations!

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