Difference between revisions of "Customise Booking Page"
| Line 6: | Line 6: | ||
*Page Content - You can choose to display either a Room Availability Calendar or define a number of Price Columns. | *Page Content - You can choose to display either a Room Availability Calendar or define a number of Price Columns. | ||
| + | |||
| + | [[File:example.jpg]] | ||
*Design - Customise Design, Colours and fonts | *Design - Customise Design, Colours and fonts | ||
Revision as of 17:56, 26 September 2013
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.
Contents
1 Advanced Options
2 Change Default Text
You can exchange any of the default text on the booking page in SETTINGS -> BOOKING PAGE -> ADVANCED -> CUSTOM TEXT
3 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:
4 Bigger Room Name
/*code for bigger room name*/
.at_roomnametext{
font-size: 14px /*if you want the text even bigger use a higher number*/
}
5 Hide Multi Room button
/*code to hide multi room button*/
.ss_multiroomdiv{display:none;}
6 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); }
7 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; }
8 Booking Page with Rounded Corners
/*code for rounded corners*/ #bookingpage {
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px; }
9 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>
