---
title: Online booking header and footer
description: 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. Configurat
---
[Skip to content](https://support.bmileisure.com/support-center/online-booking-header-and-footer#main-content)
English
Show submenu for translations
[Customer portal](https://support.bmileisure.com/tickets-view?hsLang=en)
![logo\_big\_darkBG@2x.png\]](https://support.bmileisure.com/hs-fs/hubfs/logo_big_darkBG@2x.png?height=50&name=logo_big_darkBG@2x.png)
Open main navigation
Close main navigation
- English
Show submenu for translations
- [Customer portal](https://support.bmileisure.com/tickets-view)
- [Main website](https://www.bmileisure.com/en/)
[Main website](https://www.bmileisure.com/en/)
Welcome to the BMI Support Portal. How can we help you?
- There are no suggestions because the search field is empty.
1. [Support Center](https://support.bmileisure.com/support-center?hsLang=en)
2. [Guest Activation](https://support.bmileisure.com/support-center/guest-activation?hsLang=en)
3. [Online Booking](https://support.bmileisure.com/support-center/guest-activation?hsLang=en#online-booking)
# 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 **\** tags.
*\
*
*\Due to circumstances we are currently closed. Please have a look on our \website\ for the latest info.\*
*\Sorry for the inconvenience, we hope to see you back soon!\*
*\*
### 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:
*\