Embed Online Bookings into Joomla

Follow

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.

JOOMLA_ADMINISTRATOR.png

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

In full, your URL would look something like:

www.mysite.com/administrator/index.php

URLBAR.png

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

SystemGlobalConfig.png

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

SiteSettingsDefaultEditor.png

Click 'Save' to update the changes.

ClickSave.png

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

AddNewArticle.png

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

OnlineBookings.png

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.

CodeEditor.png

 

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.

PastedURL.png

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

ChangeToPublished.png

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

   SaveArticle.png

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

   ClosePage.png

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.

MenusMainMenu.png

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

MenusNewItem.png

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.

SingleArticle.png

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

SelectAnArticle.png

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

ClickOnlineBookings_ArticleSelection.png

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

SaveMenusNewItem.png

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

MenuMainMenuOnly.png

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

MenuMainMenu_OnlineBookngs.png

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.

PublishedSite.png

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

ContentArticles.png

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

OnlineBookingsArticlesCategories.png

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

CSS_ForArticle.png

 

Our code is currently as follows:

<iframe src="https://www.makeonlinebooking.com/location/31445/simple-salon-training-b" width="400" height="600" border="0"></iframe>
<style>
iframe {
position: absolute;
width: 75%;
height: 80%;
top: 20%;
background-color: white;
left: 12.5%;
}
</style>

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!

SS_CSS_Styled.png

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!

Have more questions? Submit a request
Powered by Zendesk