Changes

Jump to navigation Jump to search

Adaptive Booking Page

527 bytes removed, 16:20, 18 June 2020
no edit summary
[[Category:How to]]
[[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 explains how is depreciated. Go to customise {#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 -> PAGE DESIGN ->LAYOUT
[[File:example.jpg]]
== Customise Design, Colours and fonts ==
{{#fas:cog}} (SETTINGS -) BOOKING ENGINE > PROPERTY BOOKING PAGE -> PAGE DESIGN ->STYLE
[[File:bookingpage1.png]]
== Content ==
*Add pictures and information for rooms (5) in {{#fas:cog}} (SETTINGS -) BOOKING ENGINE > PROPERTY BOOKING PAGE -> ROOM CONTENT. To show pictures you need to upload them first in SETTINGS -> BOOKING PAGE 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 -> PAGE DESIGN -> CONTENT
*Show [[Discounts]] adding a [[Discounts|Marketing Column]] (4)
== 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 -> PROPERTIES -) GUEST MANAGEMENT > CONFIRMATION MESSAGES*Set order in which rooms appear on your booking page / {{#fas:cog}} (SETTINGS-) PROPERTIES > ROOMS -> SETUP "AvailabitlityAvailability" and set the ''Sell Priority'' for each room.
*[[Let Guests View and Cancel Bookings]]
*Developers please also refer [[developers|here]]
== Change Default Text==
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 other payment buttons you can place this code snippet into {{#fas:cog}} (SETTINGS ) BOOKING ENGINE > PROPERTY BOOKING PAGE > -> DEVELOPERS -> "Advanced HTML Settings".
Custom Instruction:
== Hide "Book Multiple" ==
Use the selector in S {{#fas:cog}} (SETTINGS-) BOOKING ENGINE > PROPERTY BOOKING PAGE-> PAGE DESIGN->LAYOUT
== Hover Text ==
*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;}
*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>
== 'Change CSSCS' == 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: == Bigger Room Name == /*code for bigger room name*/ .at_roomnametext{ font-size: 14px /*if you want the text even bigger use a higher number*/ } == 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 == Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS" /*code for a shadow arround your booking page*/  <nowiki>#</nowiki>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 ==Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS" /*code for rounded corners*/ <nowiki>#</nowiki>bookingpage { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; } == Show prices with cents even if cents are zero ==
Webdesigners use CSS to define the look and formatting of a website.bookingpagecentshide Here a list of common adjustments which can be done pasting the code provided below into {display{#fas:inline;cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > .

Navigation menu