How to configure custom online booking footer

Introduction

As you can read in following Devblog post: Custom Online Booking Header and Footer, the system has the capability to display custom footer popup messages now. Ideal to share extra information with your clients through our Online Booking system!

Configuration

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

Webpages Overview

1. Open the menu
2. Click on ‘Communication’
3. Click in the new submenu on ‘Communication’
4. Click on ‘WebPages’

You will get an overview of all configured webpages in the system (contact page, opening hours page, …)

Create the custom footer’s popup content

Next step is to generate the footer’s popup content:

1. Click on ‘+’
2. Choose for ‘Add empty page’
   
3. Fill in the ‘Title’ field
4. Select the correct Kind (OnlineBookingCustomPopup)
5. Image and Parent fields are not used in this case
6. Fill in the content. Make sure to use decent HTML content here, because the header requires a bit of styling.
   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 footer’s popup is included in the <p> tags.<div style=”font-size:20px;background-color:orange; padding:20px;”>
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
   </p>
   </div>
7. Click on “Save” in the bottom right corner.
8. Repeat this step for each individual pop up message you would like to show

Create the actual footer and include the footer popup 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.

That’s it!