Difference between revisions of "Adaptive Booking Page (Depreciated)"
m (Annette moved page Customise Adaptive Booking Page to Adaptive Booking Page without leaving a redirect) |
m (Annette moved page Adaptive Booking Page to Adaptive Booking Page (Depreciated)) |
||
(12 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
[[Category:How to]] | [[Category:How to]] | ||
[[Category:Booking Page]] | [[Category:Booking Page]] | ||
− | + | [[Category:Booking_Engine]] | |
− | + | <div class="heading">Adaptive Booking Page</div> | |
+ | <div class="warning">{{#fas:exclamation-triangle}} This version of the booking page is depreciated. Go to {#fas:cog}} (SETTINGS) >BOOKING ENGINE and set "Booking Page Version" and "Check-out Page Version" = Responsive to use the latest mobile friendly version of the booking page. </div> | ||
+ | |||
+ | == LAYOUT - general layout == | ||
+ | {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT | ||
[[File:example.jpg]] | [[File:example.jpg]] | ||
− | + | You can choose to display either a Room Availability Calendar or define a number of Price Columns. | |
− | |||
− | + | == Customise Design, Colours and fonts == | |
− | SETTINGS | + | {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > STYLE |
− | |||
− | |||
[[File:bookingpage1.png]] | [[File:bookingpage1.png]] | ||
+ | [[File:ic_video.gif|link=]] '''[[http://youtu.be/lZvcUEajxjk Show Video]]'''' | ||
− | + | == Content == | |
− | * | + | *Add pictures and information for rooms (5) in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING ENGINE -> 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) / {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > CONTENT | |
− | + | *Show [[Discounts]] adding a [[Discounts|Marketing Column]] (4) | |
− | *Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / | ||
− | |||
− | |||
− | |||
− | *Show [[Discounts]] adding a [[Discounts|Marketing Column]] (4 | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
[[File:bookingpage.png]] | [[File:bookingpage.png]] | ||
+ | There is contextual help with each setting to assist you with the setup. | ||
+ | == Further and Advanced Options == | ||
+ | *Offer multiple languages (1) SETTINGS -> ACCOUNT -> LANGUAGES | ||
+ | *Customise Information your guest enters when booking {{#fas:cog}} (SETTINGS) PROPERTIES > BOOKING QUESTIONS | ||
+ | *Customise Confirmation Messages / {{#fas:cog}} (SETTINGS) GUEST MANAGEMENT > CONFIRMATION MESSAGES | ||
+ | *Set order in which rooms appear on your booking page {{#fas:cog}} (SETTINGS) PROPERTIES > ROOMS > SETUP "Availability" and set the ''Sell Priority'' for each room. | ||
*[[Let Guests View and Cancel Bookings]] | *[[Let Guests View and Cancel Bookings]] | ||
− | + | *Developers please also refer [[developers|here]] | |
− | * | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | Developers please also refer [[developers|here]] | ||
== Change Default Text== | == Change Default Text== | ||
− | 1. You can exchange any of the default text on the booking page in SETTINGS | + | 1. You can exchange any of the default text on the booking page in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY 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 | + | 2. 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 > DEVELOPERS "Advanced HTML Settings". |
Custom Instruction: | Custom Instruction: | ||
Line 80: | Line 61: | ||
== Hide "Book Multiple" == | == Hide "Book Multiple" == | ||
− | Use the selector in SETTINGS | + | Use the selector in S {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT |
== Hover Text == | == Hover Text == | ||
− | *To not show the number or rooms/units left place the following code in the SETTINGS | + | *To not show the number or rooms/units left place the following code in the {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS "Custom CSS" setting. |
.ptdaynumavail {display:none;} | .ptdaynumavail {display:none;} | ||
− | *To disable the hover text place the following script in the SETTINGS | + | *To disable the hover text place the following script in the {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS "Advanced HTML Settings" setting. |
<pre> | <pre> | ||
Line 101: | Line 82: | ||
</pre> | </pre> | ||
− | == | + | == Change CS' == |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | . | + | Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustments which can be done pasting the code provided below into {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > . |
Latest revision as of 10:19, 15 December 2022
Contents
1 LAYOUT - general layout
(SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT
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 ENGINE > PROPERTY BOOKING PAGE > STYLE
[Show Video]'
3 Content
- Add pictures and information for rooms (5) in (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING ENGINE -> 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 ENGINE > PROPERTY BOOKING PAGE > CONTENT
- Show Discounts adding a Marketing Column (4)
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) GUEST MANAGEMENT > CONFIRMATION MESSAGES
- Set order in which rooms appear on your booking page (SETTINGS) PROPERTIES > ROOMS > SETUP "Availability" 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 ENGINE > PROPERTY 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 other payment buttons you can place this code snippet into (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > 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 S (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > LAYOUT
7 Hover Text
- To not show the number or rooms/units left place the following code in the (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS "Custom CSS" setting.
.ptdaynumavail {display:none;}
- To disable the hover text place the following script in the (SETTINGS) BOOKING ENGINE > PROPERTY 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 CS'
Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustments which can be done pasting the code provided below into (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > .