17,090
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.
|-
| advancedays || number of days || This will set the initial date to this many days in advance of today. Only applies the first time the page is opened. If advancedays is not used the initial date will be the first date with availability.
|-
| layout ||1, 2, 3, 4, 5, 6, || Opens the responsive version of the booking page in this layout.
|-
|-
| 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:).
