Online booking header and footer

Introduction

Our online booking system has the capability to display a general header message and a booking footer. Perfect to share a message to your end users and to customize the online booking page.

Configuration

Configuration is a piece of cake! Follow these steps and you should be able to create your own header message in no time:

1. Open the menu
2. Click on ‘Communication’
3. Click in the new submenu on ‘Communication’
4. Click on ‘WebPages’
5. Click on + to add an empty page
6. Add a new page and set the kind 'OnlineBookingGeneralHeader' or 'OnlineBookingFooter' depending on what you need to create - the configuration is exactly the same. Image and Parent fields are not used in this case.
7. Fill in the content. Make sure to use decent HTML content here, because it requires a bit of styling since it will show on your website.
8. Click on “Save” in the bottom right corner.
9. Give the system a bit of time to synchronise your changes to the Online Booking platform and you should be able to see the header.

If you would like to use a general HTML template, you can copy and paste following code to get started!
You can change the background color by adapting the background-color:orange part to any color you’d prefer. The actual content of the header is included in the <p> tags.

<div style=”font-size:20px;background-color:orange; padding:20px;”>
<p>Due to circumstances we are currently closed. Please have a look on our <a href=”#”>website</a> for the latest info.</p>
<p>Sorry for the inconvenience, we hope to see you back soon!</p>
</div>

Advanced Configuration for Footer

In a footer, it is also possible to configure buttons which will be redirected to other webpages. This means that apart from the footer, you need to configure each additional custom pop-up webpage.

Create the custom footer’s popup content

You need to follow the same steps for the General header and footer with the kind 'OnlineBookingCustomPopup', this will make sure that this page will be visible only when clicking on a specific button. You need to repeat thi procedd for each pop-up webpage you need.

Create a footer including pop-up buttons

Final step is to create the actual buttons the end user can click and link them to the correct WebPage (OnlineBookingCustomPopup).

1. If you don’t have a footer already, click on the ‘+’ icon in the WebPages overview
2. Make sure to select ‘Online booking footer’ in the popup
3. The system will create a basic online booking footer page
4. Open the page and select the correct language you would like to modify from the list
5. In the Online booking footer page add a button with onclick event handler with the following code
   onclick=”CustomPopupService.showPopup(WebPageId)”
   where WebPageId is the id of the OnlineBookingCustomPopup you’ve created before, for example 12178254 in this case (this number will be different for you!!)
   In order to retrieve the WebPageId number, go to the WebPages overview and press the ‘CTRL’ and ‘F10’ button on your keyboard simultaneously. The ID will be visible in the first column.If you would like to have a HTML template for the button to start with, you can use this code:
   <button style=”padding: 10px 5px; background: lightgreen;color:black” onclick=”CustomPopupService.showPopup(WEBPAGEID)”>Show popup</button>
6. Repeat this step for each OnlineBookingCustomPopup created in the previous steps.
7. Apply your changes by pressing the “Save” button on the bottom right.