Embed Online Bookings into WordPress

If you're having trouble embedding your Simple Members 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 Members Online Bookings.

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

Older versions will appear similar to the page below:

Newer versions will look similar to the page below

Adding in your Code

To embed the Simple Members 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 the three dots at the top right of the page, then select 'Code Editor' which can be seen in the following picture

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

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 Members and navigating to Online > Admin > General Settings and clicking the Copy Embed Code link in Simple Members.

 Older versions of WordPress

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

 <code>

<iframe src='https://www.makeonlinebookings.com" width=400" height="600" />

</code>

Newer versions of WordPress

Simply paste your code down underneath the page title/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 Members 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 Members 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.