Customise Booking Page

This page explains how to customise the booking page

• Page Content - You can choose to display either a Room Availability Calendar or define a number of Price Columns.

• Design - Customise Design, Colours and fonts

SETTINGS -> BOOKING PAGE -> PAGE DESIGN

[Show Video]'

• Offer multiple languages (1) SETTINGS -> ACCOUNT -> LANGUAGES

• Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS -> BOOKING PAGE -> PAGE DESIGN

[Show Video]'

• Show Discounts adding a Marketing Column (4)

• Add pictures and information for rooms (5) in SETTINGS -> BOOKING PAGE -> ROOMS

Upload and setting (size, responsive behaviour) in SETTINGS -> BOOKING PAGE -> PICTURES

[Show Video]'

• Set different prices or packages for a room (5) in SETTINGS -> BOOKING PAGE -> ROOMS -> OFFER 2 (you can display up to four different offers)

• Let Guests View and Cancel Bookings

• Customise Information your guest enters when booking / SETTINGS -> PROPERTIES -> BOOKING QUESTIONS

• Customise Confirmation Messages / SETTINGS -> PROPERTIES -> CONFIRMATION MESSAGES

• Order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP -> "Availabitlity" and set the Sell Priority for each room.

There is contextual help with each setting to assist you with the setup.

2 Change Default Text

You can exchange any of the default text on the booking page in SETTINGS -> BOOKING PAGE -> ADVANCED -> CUSTOM TEXT

3 Hide "Book Multiple"

Use the selector in SETTINGS-> BOOKING PAGE-> ADVANCED

4 Disable Hover Text

Place the following script in SETTINGS->BOOKING PAGE-> ADVANCED "Advanced HTML Settings" setting.

<script>
$(document).ready(function() {
  var $title = $("td,div,span");
  $.each($title, function(index, value) {
    $(this).tooltip({
      disabled:true
    });  
  });
});
</script>

5 'Change CSS'

Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustmens which can be done pasting the code provided below into SETTINGS -> BOOKING PAGE -> ADVANCED. Examples:

6 Bigger Room Name

/*code for bigger room name*/

.at_roomnametext{

font-size: 14px /*if you want the text even bigger use a higher number*/

}

7 Background Image

To use a background image upload it to SETTINGS -> BOOKING PAGE -> PICTURES. Replace https://www.beds24.com/pic/p0000/2049/04.jpg with the url of your uploaded picture.

/*code fo use an image as background*/

body { background-image:url(https://www.beds24.com/pic/p0000/2049/04.jpg); }

8 Shadow Arround your Booking Page

Add code in SETTINGS-> BOOKING PAGE -> ADVANCED "Custom CSS"

/*code for a shadow arround your booking page*/

#bookingpage {

-webkit-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);

-moz-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);

box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);

box-shadow: 0 1px 2px rgba(0, 10, 10, 0.38);

margin-bottom: 20px; }

9 Booking Page with Rounded Corners

Add code in SETTINGS-> BOOKING PAGE -> ADVANCED "Custom CSS"

/*code for rounded corners*/ #bookingpage {

border-radius: 7px;

-webkit-border-radius: 7px;

-moz-border-radius: 7px; }