Responsive Booking Page: Difference between revisions

Jump to navigation Jump to search
← Older edit
No edit summary
No edit summary
 
(32 intermediate revisions by 5 users not shown)
Line 4: Line 4:
[[Category:Booking Engine]]
[[Category:Booking Engine]]
<div class="heading">Responsive Booking Page</div>
<div class="heading">Responsive Booking Page</div>
  This  page explains how to use and customise the responsive version of the booking page.
  This  page is about {{#fas:cog}}(SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT and explains how to use and customise the responsive version of the booking page.


==Booking Engine Configuration ==
==Booking Engine Configuration ==
Line 10: Line 10:


==Add booking widget to your web site ==
==Add booking widget to your web site ==
In SETTINGS->BOOKING ENGINE->BOOKING WIDGETS you can choose from a range of widgets
In {{#fas:cog}}  (SETTINGS)  BOOKING ENGINE > BOOKING WIDGETS you can choose from a range of widgets


Go to {{#fas:cog}} (SETTINGS)  BOOKING ENGINE  > BOOKING WIDGETS > IFRAME GENERATOR to generate the code to embed the booking page into your web site. Use the context help (?icons) for information about the iFrame settings.
Go to {{#fas:cog}} (SETTINGS)  BOOKING ENGINE  > BOOKING WIDGETS > IFRAME GENERATOR to generate the code to embed the booking page into your web site. Use the context help (?icons) for information about the iFrame settings.


== Set up and customise responsive booking page ==
== Set up and customise responsive booking page ==
<embedvideo service="youtube">https://youtu.be/hy0trWoKYe8</embedvideo>


=== Concept===  
=== Concept===  
Line 22: Line 23:
Modules can be added an removed. They have advanced settings so you can tailor the display exactly to your needs. For most modules content needs to be added so they can display. Available modules are:
Modules can be added an removed. They have advanced settings so you can tailor the display exactly to your needs. For most modules content needs to be added so they can display. Available modules are:


*Picture slider or gallery for property, rooms and offers
*Picture slider or gallery for property, rooms and offers (Ensure picture formats are all the same, do not mix Landscape and Portrait)
*Picture for property, rooms and offers
*Picture for property, rooms and offers
*Featues for  property and rooms
*Features for  property and rooms
*Availability calendar (one or multiple month) for for property, rooms and offers
*Availability calendar (one or multiple month) for for property, rooms and offers
*Pricetable for offers
*Pricetable for offers
Line 101: Line 102:
To customise the the booking page go to  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT.  
To customise the the booking page go to  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT.  


If you do not want to use multiple layouts leave the selector for "Layout" there and the selector for "Default Layout" in SETTINGS->BOOKING ENGINE and the selector set to 1.  
If you do not want to use multiple layouts leave the selector for "Layout" there and the selector for "Default Layout" in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE and the selector set to 1.  
 
==== Change template====
==== Change template====
Choose the template you want to use and then click on "Restore default".  
Choose the template you want to use and then click on "Restore default".  
Line 134: Line 136:
*If you use the property slider or property picture and have "Style" set to "Full width" you will need to make sure the slider/pictures  position is  set to row 1 position 1, desktop full width and mobile full width. There should be no other module in row 1. Also make sure you deactivate all modules which you do not use.  
*If you use the property slider or property picture and have "Style" set to "Full width" you will need to make sure the slider/pictures  position is  set to row 1 position 1, desktop full width and mobile full width. There should be no other module in row 1. Also make sure you deactivate all modules which you do not use.  
*If you want to show a '''Google Map''' you need to add an Google Map API Key in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER. You can obtain an API key from Google here https://developers.google.com/maps/documentation/javascript/get-api-key. Usually a free key is sufficient. Make sure you activate all required settings.
*If you want to show a '''Google Map''' you need to add an Google Map API Key in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER. You can obtain an API key from Google here https://developers.google.com/maps/documentation/javascript/get-api-key. Usually a free key is sufficient. Make sure you activate all required settings.
*The "Policies" module will use display the policies you have entered in {{#fas:cog}} (SETTINGS)   PROPERTIES > DESCRIPTION. A link to policies on your web site can be please wherever you can enter descriptive texts. You can set up a "custom question" (Type= Checkbox, Use=Obligatory) in  {{#fas:cog}} (SETTINGS)  PROPERTIES >-BOOKING QUESTIONS. If required you can add a link for example: "I accept the <a href="http://www.mywebsite.de/agb" target="_blank">terms and conditions </a>." Replace  www.mywebsite.de/agb with a link to the terms and conditions on your web site.  
*The "Policies" module will use display the policies you have entered in {{#fas:cog}} (SETTINGS) > BOOKING ENGINE A link to policies on your web site can be please wherever you can enter descriptive texts. You can set up a "custom question" (Type= Checkbox, Use=Obligatory) in  {{#fas:cog}} (SETTINGS)  PROPERTIES >-BOOKING QUESTIONS. If required you can add a link for example: "I accept the <a href="http://www.mywebsite.de/agb" target="_blank">terms and conditions </a>." Replace  www.mywebsite.de/agb with a link to the terms and conditions on your web site.  




Line 160: Line 162:




*The "Marketing Column" displays only in the modules "Price Table" and "Price Calendar". Go to  {{#fas:cog}} (SETTINGS)  PROPERTIES > OFFERS  to enter the content for the modules.
*The "Marketing Column" displays only in the modules "Price Table" and "Price Calendar" and only if activated in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE. Go to  {{#fas:cog}} (SETTINGS)  PROPERTIES > OFFERS  to enter the content for the modules.
*Offer Calendars and Price Calendars can not be used in the same layout. If you have multiple offers the calendar will show the same availability for all offers.  
*Offer Calendars and Price Calendars can not be used in the same layout. If you have multiple offers the calendar will show the same availability for all offers.  


Line 168: Line 170:
Width on desktop and mobile: Each row consists of 12 columns. The number of columns defines the width of the module.  
Width on desktop and mobile: Each row consists of 12 columns. The number of columns defines the width of the module.  


[[Image:row.png|600px|link=]]
 
[[Media:row.png|view large]]
[[Image:Booking_page.png|600px|link=]]
[[Media:Booking_page.png|view large]]




Line 251: Line 254:
General settings which apply to all layouts like minimum/maximum number of guests, nights, type of price display etc. are in  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE.
General settings which apply to all layouts like minimum/maximum number of guests, nights, type of price display etc. are in  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE.
=== Multiple or single room booking===
=== Multiple or single room booking===
You can allow guests to book one room or unit, multiple rooms or units of give the the choice. The setting is available in  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE.  
You can allow guests to book one room or unit, multiple rooms or units or give them the choice. The setting is available in  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE.
 
*If you set “Guest Can choose” it will show the selection button “Book Multiple” on top right of the Booking Strip of the booking engine.
 
*By choosing “Enable” it will show only Check in, Check out and Nights.
 
*By “Disable” it will show Check in, Check out, Nights and Guests.


=== Allow enquiries when no price is found ===
=== Allow enquiries when no price is found ===
If you are using rates you can set "Allow Enquiry" = yes. This will allow the guest to send an enquiry if you have availability but the system can not find a price. If you generally want to accept only "Requests" instead of confirmed bookings go to {{#fas:cog}} (SETTINGS)  PROPERTIES > RULES and set your "Booking Type" = Request
If you are using Fixed Prices you can set "Allow Enquiry" = yes. This will allow the guest to send an enquiry if you have availability but the system can not find a price. If you generally want to accept only "Requests" instead of confirmed bookings go to {{#fas:cog}} (SETTINGS)  BOOKING ENGINE and set your "Booking Type" = Request
 
=== Adjust prices on your booking page by adding a multiplier ===
Adjust prices on the booking page. If you want to add a multiplier to your prices, add a * followed by the multiplier number. The setting is available in  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE.
 
Examples:
 
*1.23 multiplies the price by 1.23 (i.e. raised by 23%).
*0.85 reduces the price to 85% of the normal price (i.e. lowered by 15%).


=== Add a logo to your page ===
=== Add a logo to your page ===
Line 265: Line 282:
=== Additional messages and warnings ===
=== Additional messages and warnings ===
Additional messages can be added to the booking page in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE >CONTENT. This is also where you can change the default warning messages which show when a room is not available.
Additional messages can be added to the booking page in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE >CONTENT. This is also where you can change the default warning messages which show when a room is not available.
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> The minimum stay warning is shown at the offer level.
If the minimum stay message is not showing on your page, all your offers are set = 'Only if available'
You need to have at least 1 offer = Always it will display the minimum stay warning when the search details are not available.


=== Spam Protection ===
=== Spam Protection ===
Line 273: Line 295:
*Set "Code Sent to Email Address" to "Must be Entered" and your guest will only be able to proceed the booking after they enter a code that has been automatically sent to them.
*Set "Code Sent to Email Address" to "Must be Entered" and your guest will only be able to proceed the booking after they enter a code that has been automatically sent to them.


=== Add a TripAdvisor review widget  ===
=== Add a review widget  ===
Tripadvisor provides a code snippet for reviews.
Tripadvisor and many other review services provides a code snippet for reviews.


1. Copy the widget code from your TripAdvisor account.
1. Copy the widget code from your TripAdvisor / review service account.


2. Add the code to your booking page
2. Add the code to your booking page
Line 294: Line 316:


=== Add Chat ===
=== Add Chat ===
Chat systems provide a script which you can add in  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER Advanced HTML Settings".
Chat systems provide a script which you can add in  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER "Insert in HTML <HEAD>"  to add a chat to a property booking page or  {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > MULTI BOOKING PAGE > DEVELOPER "Insert in HTML <HEAD>" to add a chat to the the multi property booking page.
 
==Accessability==
The booking page has a basic optimisation for barrier-free access.
 
If accessibility is important to you, you must also make sure
 
1. that you choose colours with high contrast. The following are recommended:
Body Background ?
 
Body Background: ffffff
   
Content Background: ffffff
   
Content Text: 000000
   
Link Colour: 1a5176
   
Border Colour: bdbdbd
   
Highlight Background From: ffffff
   
Highlight Background To: ffffff
   
Highlight Text: 000000
Form Background: ffffff
   
Form Text: 000000
Selected Dates Background: f2f2f2
   
Selected Dates Text: 000000
Available Dates Background: 12852b
   
Available Dates Text: ffffff 
Request Dates Background: def7e3
   
Request Dates Text: 000000
Not Available Dates Background: db5148
   
Not Available Dates Text: ffffff
 
 
2. if your booking page opens as a new page/tab, or is used as a landing page for Google, you should add a property description with H1 and ideally also H2 headlines at the top.


==Use multiple layouts==
==Use multiple layouts==
You can use up to 6 different layouts at the same time.  
You can use up to 6 different layouts at the same time.  


The default layout is defined in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE
The default layout is defined in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT


If you want to use multiple layouts you can set the number you want to use them under before you save.  To open another than the default layout add a parameter to the URL. Example:
If you want to use multiple layouts you can set the number you want to use them under before you save.  To open another than the default layout add a parameter to the URL. Example:
Line 307: Line 376:
will display layout 2. If you are using Wordpress you can add a layout parameter to the shortcode as explained in the plugin settings.
will display layout 2. If you are using Wordpress you can add a layout parameter to the shortcode as explained in the plugin settings.


The Facebook app uses the "default" layout which is set in SETTINGS-BOOKING PAGE.
The Facebook app uses the "default" layout which is set in{{#fas:cog}} (SETTINGS)  BOOKING ENGINE > BOOKING PAGE.


== Developer options ==
== Developer options ==
Line 318: Line 387:
Stripe and Paymill insert their button and can not be changed. To change the text of any of the other payment buttons you can place this code snippet into {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER "Advanced HTML Settings".  
Stripe and Paymill insert their button and can not be changed. To change the text of any of the other payment buttons you can place this code snippet into {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER "Advanced HTML Settings".  


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


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


Paypal
<code><script type="text/javascript">
<script type="text/javascript">
$(document).ready(function() { $("#buttonpaypal").val("the new text"); });  </script></code>
$(document).ready(function() { $("#buttonpaypal").val("the new text"); });  
  </script>


[[:category:Developers |Here]] you can find more developer options.
[[:category:Developers |Here]] you can find more developer options.
Line 339: Line 410:


== Change from adaptive to responsive booking page==
== Change from adaptive to responsive booking page==
Go to SETTINGS->BOOKING PAGE and select "Booking Page Version" = Responsive. This setting will activate Layout 1.
Go to {{#fas:cog}} (SETTINGS) BOOKING ENGINE > BOOKING PAGE and select "Booking Page Version" = Responsive. This setting will activate Layout 1.


When you change from adaptive to responsive you need to assign your pictures again. Go to {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PICTURES. Set the selector to the room then choose "Offer 1" and activate the picture/pictures you want to display. If you are using more than one offer repeat for each.  
When you change from adaptive to responsive you need to assign your pictures again. Go to {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > PICTURES. Set the selector to the room then choose "Offer 1" and activate the picture/pictures you want to display. If you are using more than one offer repeat for each.  
Retrieved from "https://wiki.beds24.com/index.php/Responsive_Booking_Page"