17,090
edits
Changes
Jump to navigation
Jump to search
'''Customise Booking Page'''
*== Custom Text ==Any fixed text on the booking page can be exchanged in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom Text"
* Javascript can be entered in SETTINGS->BOOKING PAGE ->DEVELOPERS"Advanced HTML Settings"
Add the resulting parameter to the booking page URL like thisThe API functions are available at https:&cssfile=https%3A%2F%2Fyoursite%2Fpath%2Fyour//api.beds24.csscom
Your CSS file will be included. Note: The external stylesheet needs to be hosted on a secure site (https) to be accepted by documentation is directly in the secure Beds24 booking pageAPI.
KeywordsTo use the API you need to allow API ACCES. Go to SETTINGS -> ACCOUNT -> ACCOUNT ACCESS and allow API access. The API is available at https: URL parameter, parameter, language, number of guests, web design, web designer, developer//api.beds24.com.The XML functions can be accessed with your Beds24 username and password. The JSON functions can be created with a API and prop key which you set yourself in the Beds24 control panel SETTINGS->ACCOUNT and SETTINGS->PROPERTIES->LINK
no edit summary
''This page is about the menu SETTINGS -> BOOKING PAGE -> DEVELOPERS''
Code snippets for the booking page are available in SETTINGS->BOOKING PAGE.
The booking page can be embedded in a page using an iframe or opened with a link or form. It can be fully customised in SETTINGS->BOOKING PAGE. This [[Customise_Booking_Page|page]] gives an overview. Additional options for developers are:
== Custom CSS ==
*Custom CSS can be added in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom CSS"
=== Bigger Room Name room name ===
/*code for bigger room name*/
.at_roomnametext{
.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;
}
-moz-border-radius: 7px;
}
=== Hide cents===
.bookingpagecents {display:none;}
=== Show prices with cents even if cents are zero ===
=== Add a border around the selected dates===
.datestay {border: 1px solid #2f2f2f !important;}
=== Line through unavailable dates===
=== 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.
=== Hide icons (responsive booking page only)===
.b24fa{
display: none;
}
#b24scroller .input-group-addon{
display: none;
}
=== Change text color of language selector and currency selector (responsive booking page only)===
#topofthebookingpage{
color: #ffffff
}
exchange ffffff with the hex code of the color you want to use.
=== Make language selector and currency selector a button (responsive booking page only)===
.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {
background: white;
padding: 10px;
}
== External CSS file ==
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:).
To do this you need to add the &cssfile parameter to the URL for the booking page, or for example the iframe SRC.
You could do this to use different styling per page or site.
For example if your css file is:
https://yoursite/path/your.css
Goto this site and encode it:
http://meyerweb.com/eric/tools/dencoder/
Add the resulting parameter to the booking page URL like this:
&cssfile=https%3A%2F%2Fyoursite%2Fpath%2Fyour.css
Your CSS file will be included.
Note:
The external stylesheet needs to be hosted on a secure site (https) to be accepted by the secure Beds24 booking page.
Keywords: URL parameter, parameter, language, number of guests, web design, web designer, developer
== Javascript ==
== Custom Applications = Change the title text === /*The [[:category:API|API]] can be used javascript to develop custom applications and solutionschange the titletext*/ <script>document.title='your title';</script>
== Booking Page Parameters ==
'''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 poplatedpopulated:'''
https://www.beds24.com/booking2.php?checkin=2017-8-24&numnight=3&numadult=2&numchild=0&br1-32919=Book&roomid=32919
checkin=2017-8-24 - the date the guest wants to arrive
&numnight=3 - the number of nights the guest wants ot to book
&numadult=2 - number of adults
&roomid=32919 - exchange 32919 with the room id the guest wants to book
'''Example: Booking form for a preselected room and dates'''
Create a URL like this:
https://www.beds24.com/booking2.php?propid=13434&checkin_hide=2016-11-24&numnight=2&numadult=1&br1-32906=Book
You need to define:
1) propid
2) one of checkin or checkin_hide (different date formats)
3) one of checkout, checkout_hide or numnight
4) numadult and/or numchild
5) br1-32906=Book where "br1 is offer 1, br2 is offer 2 etc. and 32906 is the room to book.
|-
| 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), id (Indonesian - Bahasa Indonesia), 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.
|-
== Customise Booking Widgets ==
Code snippets for booking widgets are available in SETTINGS->BOOKING PAGE->BOOKING WIDGETS.
[[Make_Your_Own_Booking_Widget|Make Your Own Booking Widget]]
| hidedesc || yes, no || Do not show the description
== External CSS file Custom Applications / API ==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:). To do this you need to add the &cssfile parameter to the URL for the booking page, or for example the iframe SRC. You could do this We also have an API which allows developers to use different styling per page or site. For example if your css file is:https://yoursite/path/your.css Goto this site develop their own applications and encode it:http://meyerwebsolutions.com/eric/tools/dencoder/
