17,097
edits
Changes
Jump to navigation
Jump to search
[[Category:Booking Page]]
'''== Customise Booking Widgets'''==
'''== External CSS file'''==
[[Category:Widgets]]
[[Category:How to]]
[[Category:Wordpress]]
*Any fixed text on the booking page can be exchanged in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom Text"
== Custom CSS ==
*Custom CSS can be added in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom CSS"
=== Bigger Room Name ===
/*code for bigger room name*/
.at_roomnametext{
font-size: 14px /*if you want the text even bigger use a higher number*/
}
=== Disable click on calendar===
.roomoffercalendarmonth{
pointer-events: none;
}
.monthcalendarhead{
pointer-events: auto;
}
=== Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis===
To use this option you will need to set your check-in / check-out rules in the CALENDAR. It will not work for check-in and check-out restrictions only set in rates.
NOTE: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this function.
.datenco{
background-color: #f4f4f4;
color: #cccccc;
}
=== 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 Around your Booking Page (Adaptive Booking Page Only)===
Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS"
/*code for a shadow around 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 (Adaptive Booking Page Only)===
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;
}
=== Hide cents===
.bookingpagecents {display:none;}
=== Show prices with cents even if cents are zero ===
.bookingpagecentshide {display:inline;}
=== Mark certain days of the week ===
Example 1: Change the background color for Saturday
.daySat {color:#c44a2f !important;}
exchange daySat by daySun, dayMon, dayTue, dayeWed, dayThu, dayFri to exchange the backgound color for other days.
Example 2: Change the background color for Saturday
.daysat {background-color:#ccc !important;}
exchange daysat by daysun, daymon, daytue, dayewed, daythu, dayfri to exchange the backgound color for other days.
Example 3: Add a border arround Saturday
.daysat {border:1px solid #999999 !important;}
exchange daysat by daysun, daymon, daytue, dayewed, daythu, dayfri to exchange the backgound color for other days.
=== Add a border around the selected dates===
.datestay {border: 1px solid #2f2f2f !important;}
=== Line through unavailable dates===
.datenotavail {
text-decoration: line-through;
}
=== Change width of hover image (adaptive booking page only===
.ui-tooltip {
max- width: 500px;}
=== Remove the hover effect on pictures (adaptive booking page only)===
img {
pointer-events: none;
}
=== Add a label above the room selector for multiple room bookings (responsive booking page only)===
.roomofferqtyselectlabel {
display: block;}
=== Hide up button (responsive booking page only)===
footer .button{
display: none;
}
=== Add icons to descriptive texts (responsive booking page only)===
[https://getbootstrap.com/docs/3.3/components/#glyphicons Bootstrap glyphicons] and [http://fontawesome.io/icons/ Font Awesome icons] can be added to the descriptive fields. To add icons the editor needs to be set to "Source"
Examples:
<nowiki><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</nowiki>
will add a Bootstap icon for a person.
<nowiki><i class="fa fa-bicycle" aria-hidden="true"></i>
</nowiki>
will add a Font Awesomeicon for a bicycle.
Note: Icons might disappear when the editor is opened again. In this case you will need to enter it again.
== Javascript ==
* Javascript can be entered in SETTINGS->BOOKING PAGE ->DEVELOPERS"Advanced HTML Settings"
== Custom Applications ==
*The [[:category:API|API]] can be used to develop custom applications and solutions.
== Booking Page Parameters ==
*The behavior of the booking page can be controlled with the following parameters passed in the URL or form. URL Parameters are always added in the format name=value. To separate them, the first parameter must have a ? before it and all following parameters must have an & before them. For example if you want to change the default for the numbers of night selector to 7 nights you change the link to your booking page from
'''Example: hide header'''
https://www.beds24.com/booking2.php?propid=2047
https://www.beds24.com/booking2.php?propid=2048&hideroom=3589,3588
'''Example: link to the booking page with dates pre populated:'''
https://www.beds24.com/booking2.php?propid=13437&checkin=2017-8-24&numnight=3
exchange these values with your data:
checkin=2017-8-24 - the date the guest wants to arrive
&numnight=3 - the number of nights the guest wants to book
'''Example link to a booking form with dates and room pre populated:'''
https://www.beds24.com/booking2.php?checkin=2017-8-24&numnight=3&numadult=2&numchild=0&br1-32919=Book&roomid=32919
exchange these values with your data:
checkin=2017-8-24 - the date the guest wants to arrive
&numnight=3 - the number of nights the guest wants to book
&numadult=2 - number of adults
&numchild=0 - number of children
&br1-32919=Book - exchange 32919 with the room id the guest wants to book
&roomid=32919 - exchange 32919 with the room id the guest wants to book
|-
| referer || text ||This text will be recorded with any bookings originating from this widget allowing tracking of booking sources
|-
| invoicee || text ||Charges and payments will be assigned to this invoicee.
|-
|-
| lang ||en (English), ar (Arabic), bg (Bulgarian), ca (Catalan), hr (Croatian), cs (Czech), da (Danish), de (German), el (Greek), es (Spanish), et (Estonian), fi (Finnish), fr (French), he (Hebrew), hu (Hungarian), it (Italian), ja (Japanese), lt (Lithuanian), mn (Mongolian), my (Burmese), nl (Dutch), no (Norwegian), pl (Polish), pt (PortugesePortuguese), ru (Russian), sk (Slovak), sl (Slovenian), sr (Serbian), sv (Swedish), th (Thai), tr (Turkish), zh (Chinese) || Sets the default language to open the booking page. (2013 new style booking page only)
|-
|-
| hideoffer ||1,2,3,4 || Do not show this price row offer on the booking page, multiple id's can be specified with a comma separating them.
|-
| group || keyword || Show only properties that have this group keyword |-| nogroup || keyword || Exclude properties that have this group keyword |-| cssfile ||url encoded url || External css file for inclusion in booking page, the file must be available via a secure url (https) and the url must be url encoded. (http://meyerweb.com/eric/tools/dencoder/)
|-
| cur ||AUD, CAD, EUR, GBP, NZD, USD, BGN, BRL, CHF, CNY, CZK, DKK, EEK, HKD, HRK, HUF, IDR, INR, JPY, KRW, MXN, MYR, NOK, PHP, PLN, RON, RUB, SEK, SGD, THB, TRY, VND, ZAR|| Opens the page showing the currency converted. (responsive booking page only)
|-
| redirect ||encoded url || Redirect to this url, must start with http:// or https:// and be url encoded with a tool like http://meyerweb.com/eric/tools/dencoder/. The booking details are stored in session variables and will be available available to a booking page in an iFrame at your redirect URL as long as the iFrame is not overriding them in it's src url.
|}
Code snippets for booking widgets are available in SETTINGS->BOOKING PAGE->BOOKING WIDGETS.
| hidedesc || yes, no || Do not show the description
It is possible to make the booking page use a CSS file that you supply, you must host the CSS file on a secure web server (using https:).
