Difference between revisions of "Adaptive Booking Page (Depreciated)"

From Beds24 Wiki
Jump to navigation Jump to search
m (Annette moved page Customise Adaptive Booking Page to Adaptive Booking Page without leaving a redirect)
Line 2: Line 2:
 
[[Category:Booking Page]]
 
[[Category:Booking Page]]
 
  ''This page explains how to customise the 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 (SETTINGS->BOOKING PAGE->PAGE DESIGN)
 
  
 +
== LAYOUT - general layout ==
 +
SETTINGS -> BOOKING PAGE -> PAGE DESIGN ->LAYOUT
  
 
[[File:example.jpg]]
 
[[File:example.jpg]]
  
*LAYOUT - general layout
+
You can choose to display either a Room Availability Calendar or define a number of Price Columns.
SETTINGS -> BOOKING PAGE -> PAGE DESIGN ->LAYOUT
 
  
*Design - Customise Design, Colours and fonts  
+
==  Customise Design, Colours and fonts ==
 
SETTINGS -> BOOKING PAGE -> PAGE DESIGN ->STYLE
 
SETTINGS -> BOOKING PAGE -> PAGE DESIGN ->STYLE
 
[[File:ic_video.gif|link=]]  '''[[http://youtu.be/lZvcUEajxjk Show Video]]''''
 
  
 
[[File:bookingpage1.png]]
 
[[File:bookingpage1.png]]
  
 +
[[File:ic_video.gif|link=]]  '''[[http://youtu.be/lZvcUEajxjk Show Video]]''''
  
 
+
==  Content ==
* Offer multiple languages (1) SETTINGS -> ACCOUNT -> LANGUAGES
+
*Add pictures and information for rooms  (5) in SETTINGS -> BOOKING PAGE -> ROOM CONTENT.  To show pictures you need to upload them first in SETTINGS -> BOOKING PAGE -> PICTURES
 
 
 
 
 
*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 -> CONTENT
 
*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 -> CONTENT
 
+
*Show [[Discounts]] adding a [[Discounts|Marketing Column]] (4)
 
 
 
 
*Show [[Discounts]] adding a [[Discounts|Marketing Column]] (4)
 
 
 
 
 
*Add pictures and information for rooms  (5) in SETTINGS -> BOOKING PAGE -> ROOM CONTENT
 
 
 
Upload and setting (size, responsive behaviour) in SETTINGS -> BOOKING PAGE -> PICTURES
 
 
 
[[File:ic_video.gif|link=]]  '''[[http://youtu.be/d6NH1UGXoeI Show Video]]''''
 
 
 
 
 
*Set different prices or packages for a room (5) in SETTINGS -> BOOKING PAGE -> ROOM CONTENT -> OFFER 2 (you can display up to four different offers)
 
  
 
[[File:bookingpage.png]]
 
[[File:bookingpage.png]]
  
 +
There is contextual help with each setting to assist you with the setup.
  
*[[Let Guests View and Cancel Bookings]]
+
== '''Further and Advanced Options''' ==
 
+
*Offer multiple languages (1) SETTINGS -> ACCOUNT -> LANGUAGES
 
*Customise Information your guest enters when booking  / SETTINGS -> PROPERTIES -> BOOKING QUESTIONS
 
*Customise Information your guest enters when booking  / SETTINGS -> PROPERTIES -> BOOKING QUESTIONS
 
 
*Customise Confirmation Messages  / SETTINGS -> PROPERTIES -> CONFIRMATION MESSAGES
 
*Customise Confirmation Messages  / SETTINGS -> PROPERTIES -> CONFIRMATION MESSAGES
 
+
*Set order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP "Availabitlity" and set the ''Sell Priority'' for each room.
*Order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP -> "Availabitlity" and set the ''Sell Priority'' for each room.
+
*[[Let Guests View and Cancel Bookings]]
 
+
*Developers please also refer [[developers|here]]
 
 
There is contextual help with each setting to assist you with the setup.
 
 
 
== '''Further and Advanced Options''' ==
 
 
 
Developers please also refer [[developers|here]].
 
  
 
== Change Default Text==
 
== Change Default Text==

Revision as of 12:08, 5 November 2015

This page explains how to customise the booking page

1 LAYOUT - general layout

SETTINGS -> BOOKING PAGE -> PAGE DESIGN ->LAYOUT

Example.jpg

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

2 Customise Design, Colours and fonts

SETTINGS -> BOOKING PAGE -> PAGE DESIGN ->STYLE

Bookingpage1.png

Ic video.gif [Show Video]'

3 Content

  • Add pictures and information for rooms (5) in SETTINGS -> BOOKING PAGE -> ROOM CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING PAGE -> PICTURES
  • 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 -> CONTENT
  • Show Discounts adding a Marketing Column (4)

Bookingpage.png

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

4 Further and Advanced Options

  • Offer multiple languages (1) SETTINGS -> ACCOUNT -> LANGUAGES
  • Customise Information your guest enters when booking / SETTINGS -> PROPERTIES -> BOOKING QUESTIONS
  • Customise Confirmation Messages / SETTINGS -> PROPERTIES -> CONFIRMATION MESSAGES
  • Set order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP "Availabitlity" and set the Sell Priority for each room.
  • Let Guests View and Cancel Bookings
  • Developers please also refer here

5 Change Default Text

1. You can exchange any of the default text on the booking page in SETTINGS -> BOOKING PAGE -> DEVELOPERS -> "Custom Text"


2. Stripe and Paymill insert their button and can not be changed. To change the text of any of the ofther payment buttons you can place this code snippet into SETTINGS -> DEVELOPERS -> "Advanced HTML Settings".

Custom Instruction: 
<script type="text/javascript">
$(document).ready(function() { $("#buttoncustominstruction").val("the new text"); }); 
</script>
Authorize.Net: 
<script type="text/javascript">
$(document).ready(function() { $("#buttonauthorizenet").val("the new text"); }); 
</script>
Paypal
<script type="text/javascript">
$(document).ready(function() { $("#buttonpaypal").val("the new text"); }); 
</script>

6 Hide "Book Multiple"

Use the selector in SETTINGS-> BOOKING PAGE-> PAGE DESIGN->LAYOUT

7 Hover Text

  • To not show the number or rooms/units left place the following code in the SETTINGS->BOOKING PAGE-> DEVELOPERS "Custom CSS" setting.
.ptdaynumavail {display:none;}
  • To disable the hover text place the following script in the SETTINGS->BOOKING PAGE-> DEVELOPERS "Advanced HTML Settings" setting.
<script>
$(document).ready(function() {
  var $title = $("td,div,span");
  $.each($title, function(index, value) {
    $(this).tooltip({
      disabled:true
    });  
  });
});
</script>

8 '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 -> DEVELOPERS. Examples:

9 Bigger Room Name

/*code for bigger room name*/
.at_roomnametext{
font-size: 14px /*if you want the text even bigger use a higher number*/
}

10 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);
}

11 Shadow Arround your Booking Page

Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "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;	
}

12 Booking Page with Rounded Corners

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

/*code for rounded corners*/

#bookingpage {
border-radius: 7px;
-webkit-border-radius: 7px;	
-moz-border-radius: 7px;		
}

13 Show prices with cents even if cents are zero

.bookingpagecentshide {display:inline;}