Customise Booking Page
The booking page can be fully customised to individual needs.
- 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
[Show Video]'
- Set different prices or packages for a room (5) in SETTINGS -> BOOKING PAGE -> ROOMS -> EXTRA PRICE ROWS
- Customise Information your guest enters when booking / SETTINGS -> BOOKING PAGE -> BOOKING QUESTIONS
- Customise Confirmation Messages / SETTINGS -> BOOKING PAGE -> CONFIRMATION MESSAGES
- Order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP -> AVAILABILITY and set the Sell Priority for each room.
There is contextual help with each setting to assist you with the setup.
Advanced Options
Change Default Text
You can exchange any of the default text on the booking page in SETTINGS -> BOOKING PAGE -> ADVANCED -> CUSTOM TEXT
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 -> WEBDESIGNERS. Examples:
Bigger Room Name
/*code for bigger room name*/
.at_roomnametext{
font-size: 14px /*if you want the text even bigger use a higher number*/
}
Hide Multi Room button
/*code to hide multi room button*/
.ss_multiroomdiv{display:none;}
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); }
Shadow Arround your Booking Page
/*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; }
Booking Page with Rounded Corners
/*code for rounded corners*/ #bookingpage {
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px; }
Disable Hover Text
Place the following script in the "Insert in HTML <HEAD>" setting.
<script>
$(document).ready(function() {
var $title = $("td,div,span");
$.each($title, function(index, value) {
$(this).tooltip({
disabled:true
});
});
});
</script>