Difference between revisions of "Category:Developers"

From Beds24 Wiki
Jump to navigation Jump to search
 
(86 intermediate revisions by 5 users not shown)
Line 4: Line 4:
 
[[Category:Widgets]]
 
[[Category:Widgets]]
 
[[Category:Booking Page]]
 
[[Category:Booking Page]]
−
[[Category:How to]]
+
[[Category:Booking_Engine]]
−
[[Category:Wordpress]]
+
<div class="heading">Developer Options</div>
−
  ''This page is about the menu SETTINGS -> BOOKING PAGE -> DEVELOPERS''
+
  This page is about the menu {{#fas:cog}} (SETTINGS) > BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS
−
Code snippets for the booking page are available in SETTINGS->BOOKING PAGE.
 
  
−
'''Customise 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  This page is about the menu {{#fas:cog}} (SETTINGS) > BOOKING ENGINE. This  [[Customise_Booking_Page|page]] gives an overview. Additional options for developers are:
  
−
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 Text ==
 +
Any fixed text on the booking page can be exchanged in This page is about the menu {{#fas:cog}} (SETTINGS) > BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER > "Custom Text"
  
−
*Any fixed text on the booking page can be exchanged in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom Text"
+
For more information please read the context help (?).
  
 
== Custom CSS ==
 
== Custom CSS ==
  
−
*Custom CSS can be added in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom CSS"
+
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  Custom CSS can be added in This page is about the menu {{#fas:cog}} (SETTINGS) > BOOKING ENGINE  > PROPERTY BOOKING PAGE > DEVELOPERS > "Custom CSS"
  
−
=== Bigger Room Name ===
+
To see a list of CSS examples look into this document: [[Custom_CSS|Custom CSS]]
−
/*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===
+
== External CSS file ==
−
.roomoffercalendarmonth{
+
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:).
−
  pointer-events: none;
 
−
}
 
  
−
.monthcalendarhead{
+
To do this you need to add the &cssfile parameter to the URL for the booking page, or for example the Iframe SRC.
−
pointer-events: auto;
 
−
}
 
  
−
=== Background Image  ===
+
You could do this to use different styling per page or site.
−
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*/
+
For example if your css file is:
−
body {
+
https://yoursite/path/your.css
−
background-image:url(https://www.beds24.com/pic/p0000/2049/04.jpg);
 
−
}
 
  
−
=== Shadow Around your Booking Page (Adaptive Booking Page Only)===
+
Go to this site and encode it:
 +
http://meyerweb.com/eric/tools/dencoder/
  
−
Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS"
+
Add the resulting parameter to the booking page URL like this:
 +
&cssfile=https%3A%2F%2Fyoursite%2Fpath%2Fyour.css
  
−
/*code for a shadow arround your booking page*/
+
Your CSS file will be included.
 +
 
 +
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  The external stylesheet needs to be hosted on a secure site (https) to be accepted by the secure Beds24 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)===
+
Keywords: URL parameter, parameter, language, number of guests, web design, web designer, developer
−
Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS"
 
  
−
/*code for rounded corners*/
+
== Javascript ==
−
  <nowiki>#</nowiki>bookingpage {
+
Javascript can be entered in This page is about the menu {{#fas:cog}} (SETTINGS)> BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS or in {{#fas:cog}} (SETTINGS) >BOOKING ENGINE > MULTI BOOKING PAGE> DEVELOPER "Advanced HTML Settings"
−
  border-radius: 7px;
 
−
  -webkit-border-radius: 7px;
 
−
  -moz-border-radius: 7px;
 
−
}
 
  
−
=== Show prices with cents even if cents are zero ===
+
=== Redirects ===
 +
For example: this would cause property 1234 to open in the parent window (frame busting) when it's book button is clicked on the multiple property page
  
−
.bookingpagecentshide {display:inline;}
+
<code><script>
 +
$(document).ready(function(){
 +
$('#propid1234 a').attr('target', '_parent');
 +
});
 +
</script></code>
  
−
=== Mark certain days of the week ===
+
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> Check the settings under  {{#fas:cog}} (SETTINGS) >BOOKING ENGINE  >  PROPERTY BOOKING PAGE > BEHAVIOUR before you add such a script.
−
Example 1: Change the background color for Saturday
 
  
−
.daySat {color:#c44a2f !important;}
+
=== Change the title text ===
 +
Javascript to change the titletext.
  
−
exchange daySat by daySun, dayMon, dayTue, dayeWed, dayThu, dayFri to exchange the backgound color for other days.
+
<code><script>document.title='your title';</script></code>
  
−
Example 2: Change the background color for Saturday
+
=== Change date format  ===
 +
Javascript to change the date format.
  
−
.daysat {background-color:#ccc !important;}
 
  
−
exchange daysat by daysun, daymon, daytue, dayewed, daythu, dayfri to exchange the backgound color for other days.
+
<code><script>
 +
$(document).ready(function(){
  
−
Example 3: Add a border arround Saturday
+
$('#inputcheckin').data('date-format','MMMM DD, YYYY');
 +
$('#inputcheckout').data('date-format','MMMM DD, YYYY');
 +
})
 +
</script></code>
  
−
.daysat {border:1px solid #999999 !important;}
+
<code><script>
 +
window.onload = function() {
 +
$("[id^='ptdate']").text(function(i, t) {
 +
return t.split(' ').reverse().join(' ');
 +
})
 +
};
  
−
exchange daysat by daysun, daymon, daytue, dayewed, daythu, dayfri to exchange the backgound color for other days.
+
window.onunload = function(){};
 +
</script></code>
  
−
== Javascript ==
+
=== Change the first day of the week in the datepicker===
−
* Javascript can be entered in SETTINGS->BOOKING PAGE ->DEVELOPERS"Advanced HTML Settings"
+
The start day of the week in the checkin and checkout selectors is set automatically based on the language selected by the guest, different languages have different standards for this.
 +
It is possible to override it on a per language basis.
  
−
== Custom Applications ==
+
This example changes English to start on Monday, The value of dow can be from 0 to 6 where 0 is Sunday.
 +
If you want to change multiple languages you would need to include a script for each language.
  
−
*The [[:category:API|API]] can be used to develop custom applications and solutions.
+
<code><script>
 +
moment.updateLocale("en", { week: {
 +
dow: 1
 +
}});
 +
</script></code>
  
 
== Booking Page Parameters ==
 
== 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  
+
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  
  
−
https://www.beds24.com/booking2.php?propid=2047
+
https://beds24.com/booking2.php?propid=2047
  
 
to
 
to
  
−
https://www.beds24.com/booking2.php?propid=2047&numnight=7
+
https://beds24.com/booking2.php?propid=2047&numnight=7
  
  
−
Example: hide header
+
Example: Make a booking page for selected rooms only
  
−
https://www.beds24.com/booking2.php?propid=2047
+
Use the propid to open the page and add &hideroom=22543 to hide a room. You can hide multiple rooms by comma separating them.
  
−
to
+
https://beds24.com/booking2.php?propid=2048&hideroom=3589,3588
 +
 
 +
 
 +
'''Example: link to the booking page with dates pre populated:'''
 +
 
 +
https://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://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
 +
 
 +
'''Example: Booking form for a preselected room and dates'''
 +
 
 +
Create a URL like this:
 +
 
 +
https://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)
  
−
https://www.beds24.com/booking2.php?propid=2047&hideheader=yes
+
3) one of checkout, checkout_hide or numnight
  
−
Example: Make a booking page for selected rooms only
+
4) numadult and/or numchild
  
−
Use the propid to open the page and add &hideroom=22543 to hide a room. You can hide multiple rooms by comma separating them.
+
5) br1-32906=Book where "br1 is offer 1, br2 is offer 2 etc. and 32906 is the room to book.
  
−
https://www.beds24.com/booking2.php?propid=2048&hideroom=3589,3588
 
  
  
Line 125: Line 168:
 
| '''Parameter''' || '''Value'''    ||'''Description'''
 
| '''Parameter''' || '''Value'''    ||'''Description'''
 
|-
 
|-
−
| https://www.beds24.com/booking.php  || Path to booking page        ||At the very minimum there must also be one of propid, roomid or ownerid parameter
+
| https://beds24.com/booking.php  || Path to booking page        ||At the very minimum there must also be one of propid, roomid or ownerid parameter
  
 
|-
 
|-
−
| roomid || id number of room. || The page will open showing this room.  
+
| 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 current date. The first date with availability can be specified by setting advancedays to the value -1.
  
 
|-
 
|-
−
| propid || id number of property. || The page will open showing this property.
+
| checkin || check-in full date || The page will open at this check-in date
−
 
 
  
 
|-
 
|-
−
| ownerid || id number of owner.  || The page will open showing all properties and rooms for this owner
+
| cssfile  ||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/)
  
 
|-
 
|-
−
| checkin || check-in full date || The page will open at this check-in date
+
| 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)
−
 
 
−
|-
 
−
| mobile=0  || desktop view  || Display the booking page in desktop view
 
−
 
 
  
 
|-
 
|-
Line 155: Line 193:
 
|-
 
|-
 
| fdate_year || check-in year || The page will open at this check-in date, must be used with fdate_date and fdate_month and be in the format YYYY
 
| fdate_year || check-in year || The page will open at this check-in date, must be used with fdate_date and fdate_month and be in the format YYYY
 +
  
 
|-
 
|-
−
| mobile=1 || mobile view  || Display the booking page in mobile view
+
| group  || keyword || Show only properties that have this group keyword
  
 
|-
 
|-
−
| numnight || number of nights || Initial value for the number of nights selector
+
| hidefooter ||yes, no || Do not show the property information at the bottom of the page
  
 
|-
 
|-
−
| numadult || number of adults || Initial value for the number of adults selector
+
| hideheader ||yes, no || Do not show the property information at the top of the page. Do not use this option when using a "Full Width Slider".
 +
 
  
 
|-
 
|-
−
| numchild || number of children || Initial value for the number of children selector
+
| hideoffer ||1,2,3,4 || Do not show this offer on the booking page, multiple id's can be specified with a comma separating them.
  
 
|-
 
|-
−
| width || page width in px || Useful for embedding the booking page in an iframe of fixed size
+
| hideprop  ||property id || Do not show this property on the booking page, multiple id's can be specified with a comma separating them.
  
 
|-
 
|-
−
| numdisplayed || number of nights with prices displayed || Only applies to price table pages, use this to reduce the number of nights for narrow designs
+
| hideroom ||room id || Do not show this room on the booking page, multiple id's can be specified with a comma separating them.
  
 
|-
 
|-
−
| referer || text ||This text will be recorded with any bookings originating from this widget allowing tracking of booking sources
+
| invoicee || integer ||Charges and payments will be assigned to this invoicee ID.
  
 
|-
 
|-
−
| 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.
+
| 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), hy (Armenian), id (Indonesian - Bahasa Indonesia), is (Icelandic), it (Italian), ja (Japanese), ko (Korean), lt (Lithuanian), lv (Latvian) mn (Mongolian), my (Burmese), nl (Dutch), no (Norwegian), pl (Polish), pt (Portuguese), ro (Romanian), ru (Russian),  sk (Slovak), sl (Slovenian), sr (Serbian), sv (Swedish), th (Thai), tr (Turkish), vi (Vietnamese),  zh (Chinese simplified),  zt (Chinese traditional) || Sets the default language to open the booking page. (2013 new style booking pages only)
  
 
|-
 
|-
 
| layout  ||1, 2, 3, 4, 5, 6,  || Opens the responsive version of the booking page in this layout.
 
| layout  ||1, 2, 3, 4, 5, 6,  || Opens the responsive version of the booking page in this layout.
 +
 +
 +
|-
 +
| maxprop  ||number of properties || Show a maximum of this many properties based on the sort order. Additional properties are hidden.
 +
 +
 +
|-
 +
| maxroom  ||number of rooms || Only show a maximum of this many rooms based on the sort order. Additional rooms are hidden.
  
 
|-
 
|-
−
| hideheader  ||yes, no || Do not show the property information at the top of the page
+
| mobile=1 || mobile view || Display the booking page in mobile view
  
 
|-
 
|-
−
| hidefooter ||yes, no || Do not show the property information at the bottom of the page
+
| mobile=0 || desktop view || Display the booking page in desktop view
  
 
|-
 
|-
Line 193: Line 241:
  
 
|-
 
|-
−
| lang ||en (English), ar (Arabic), bg (Bulgarian), ca (Catalan), cs (Czech), da (Danish), de (German), el (Greek),  es (Spanish), et (Estonian),  fi (Finnish),  fr (French), he (Hebrew), it (Italian), ja (Japanese), lt (Lithuanian), mn (Mongolian), my (Burmese), nl (Dutch), no (Norwegian), pl (Polish), pt (Portugese), ru (Russian),  sk (Slovak), sl (Slovenian), sv (Swedish), th (Thai), tr (Turkish), zh (Chinese) || Sets the default language to open the booking page. (2013 new style booking page only)
+
| numnight || number of nights || Initial value for the number of nights selector
 +
 
 +
|-
 +
| numadult || number of adults || Initial value for the number of adults selector
  
 
|-
 
|-
−
| hideprop ||property id || Do not show this property on the booking page, multiple id's can be specified with a comma separating them.
+
| numchild || number of children || Initial value for the number of children selector
 +
 
 +
 
 +
|-
 +
| numdisplayed  || number of nights with prices displayed  || Only applies to price table pages, use this to reduce the number of nights for narrow designs
  
 
|-
 
|-
−
| maxprop ||number of properties || Show a maximum of this many properties based on the sort order. Additional properties are hidden.
+
| nogroup || keyword || Exclude properties that have this group keyword
 +
 
  
 
|-
 
|-
−
| hideroom  ||room id  || Do not show this room on the booking page, multiple id's can be specified with a comma separating them.
+
| ownerid || id number of owner. || The page will open showing all properties and rooms for this owner
  
 
|-
 
|-
−
| maxroom  ||number of rooms || Only show a maximum of this many rooms based on the sort order. Additional rooms are hidden.  
+
| propid || id number of property. || The page will open showing this property.  
  
 
|-
 
|-
−
| hideoffer ||1,2,3,4  || Do not show this price row on the booking page, multiple id's can be specified with a comma separating them.
+
| 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.
  
 
|-
 
|-
−
| group || keyword || Show only properties that have this group keyword
+
| referer || text  ||This text will be recorded with any bookings originating from this widget allowing tracking of booking sources
  
 
|-
 
|-
−
| nogroup  || keyword || Exclude properties that have this group keyword
+
| roomid || id number of room. || The page will open showing this room.
  
 
|-
 
|-
−
| cssfile  ||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/)
+
| toproom || room always shown on the top of the bookingpage  || you can add mulitpel room IDs separated by a comma (resposive booking page only)  
  
 
|-
 
|-
−
| 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)
+
| voucher || voucher code  || Pre populates the discount voucher code
  
 
|-
 
|-
−
| 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.
+
| width || page width in px  || Useful for embedding the booking page in an Iframe of fixed size
  
 
|}
 
|}
  
 
== Customise Booking Widgets ==
 
== Customise Booking Widgets ==
−
 
+
Code snippets for booking widgets are available in {{#fas:cog}} (SETTINGS)  BOOKING ENGINE > BOOKING WIDGETS.
−
Code snippets for booking widgets are available in SETTINGS->BOOKING PAGE->BOOKING WIDGETS.
 
  
 
You can use HTML and CSS to create custom solutions.  
 
You can use HTML and CSS to create custom solutions.  
  
 
[[Make_Your_Own_Booking_Widget|Make Your Own Booking Widget]]
 
[[Make_Your_Own_Booking_Widget|Make Your Own Booking Widget]]
−
 
  
  
Line 250: Line 304:
 
| hidedesc  || yes, no  || Do not show the description
 
| 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:).
+
We also have an API which allows developers to develop their own applications and solutions.
 +
 
 +
The API functions are available at https://api.beds24.com
 +
 
 +
The documentation is directly in the API.
 +
 
 +
To use the API you need to allow API access. Go to This page is about the menu {{#fas:cog}} (SETTINGS) > ACCOUNT -> ACCOUNT ACCESS and allow API access. The API is available at https://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  This page is about the menu {{#fas:cog}} (SETTINGS) > ACCOUNT and  This page is about the menu {{#fas:cog}} (SETTINGS) > PROPERTIES > ACCESS
  
−
To do this you need to add the &cssfile parameter to the URL for the booking page, or for example the iframe SRC.
+
==Skip to Checkout Page from Beds24 Plugin Widget==
 +
You can  bypass the booking page and redirect the widget directly to the checkout page by adding this parameter
  
−
You could do this to use different styling per page or site.
+
<code>customParameter:'br1-xxxx=book'</code>
  
−
For example if your css file is:
+
to the widget.
−
https://yoursite/path/your.css
 
  
−
Goto this site and encode it:
+
Replace xxxx with the room ID of the room you want to populate.
−
http://meyerweb.com/eric/tools/dencoder/
 
  
−
Add the resulting parameter to the booking page URL like this:
+
== Create a website with the content in your Beds24 account ==
−
&cssfile=https%3A%2F%2Fyoursite%2Fpath%2Fyour.css
+
We have an integration with Rezintel which allows users/developers to create a website with the data you have in Beds24.
  
−
Your CSS file will be included.
+
Go to [https://wiki.beds24.com/index.php/Rezintel_Website_Builder Website builder] for more details.
−
Note:
 
−
The external stylesheet needs to be hosted on a secure site (https) to be accepted by the secure Beds24 booking page.
 
  
 +
== Suppress Google Translate==
 +
Add the following in the "Head" section:
  
−
Keywords: URL parameter, parameter, language, number of guests, web design, web designer, developer
+
<code><meta name=“google” content=“notranslate”>
 +
<html translate=“no”></code>

Latest revision as of 07:01, 8 May 2023

Developer Options
This page is about the menu  (SETTINGS) > BOOKING ENGINE  >  PROPERTY BOOKING PAGE > DEVELOPERS

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 This page is about the menu (SETTINGS) > BOOKING ENGINE. This page gives an overview. Additional options for developers are:

1 Custom Text

Any fixed text on the booking page can be exchanged in This page is about the menu (SETTINGS) > BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER > "Custom Text"

For more information please read the context help (?).

2 Custom CSS

Custom CSS can be added in This page is about the menu (SETTINGS) > BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS > "Custom CSS"

To see a list of CSS examples look into this document: Custom CSS

3 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

Go to 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.

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

4 Javascript

Javascript can be entered in This page is about the menu (SETTINGS)> BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS or in (SETTINGS) >BOOKING ENGINE > MULTI BOOKING PAGE> DEVELOPER "Advanced HTML Settings"

4.1 Redirects

For example: this would cause property 1234 to open in the parent window (frame busting) when it's book button is clicked on the multiple property page

<script> $(document).ready(function(){ $('#propid1234 a').attr('target', '_parent'); }); </script>

Check the settings under (SETTINGS) >BOOKING ENGINE > PROPERTY BOOKING PAGE > BEHAVIOUR before you add such a script.

4.2 Change the title text

Javascript to change the titletext.

<script>document.title='your title';</script>

4.3 Change date format

Javascript to change the date format.


<script> $(document).ready(function(){

$('#inputcheckin').data('date-format','MMMM DD, YYYY'); $('#inputcheckout').data('date-format','MMMM DD, YYYY'); }) </script>

<script> window.onload = function() { $("[id^='ptdate']").text(function(i, t) { return t.split(' ').reverse().join(' '); }) };

window.onunload = function(){}; </script>

4.4 Change the first day of the week in the datepicker

The start day of the week in the checkin and checkout selectors is set automatically based on the language selected by the guest, different languages have different standards for this. It is possible to override it on a per language basis.

This example changes English to start on Monday, The value of dow can be from 0 to 6 where 0 is Sunday. If you want to change multiple languages you would need to include a script for each language.

<script> moment.updateLocale("en", { week: { dow: 1 }}); </script>

5 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

https://beds24.com/booking2.php?propid=2047

to

https://beds24.com/booking2.php?propid=2047&numnight=7


Example: Make a booking page for selected rooms only

Use the propid to open the page and add &hideroom=22543 to hide a room. You can hide multiple rooms by comma separating them.

https://beds24.com/booking2.php?propid=2048&hideroom=3589,3588


Example: link to the booking page with dates pre populated:

https://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://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

Example: Booking form for a preselected room and dates

Create a URL like this:

https://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.


Parameter Value Description
https://beds24.com/booking.php Path to booking page At the very minimum there must also be one of propid, roomid or ownerid parameter
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 current date. The first date with availability can be specified by setting advancedays to the value -1.
checkin check-in full date The page will open at this check-in date
cssfile 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)
fdate_date check-in date of month The page will open at this check-in date, must be used with either fdate_monthyear or fdate_month and fdate_year. Must be in format DD
fdate_monthyear check-in month and year The page will open at this check-in date, must be used with fdate_date and be in the format MM-YYYY
fdate_month check-in month The page will open at this check-in date, must be used with fdate_date and fdate_year and be in the format MM
fdate_year check-in year The page will open at this check-in date, must be used with fdate_date and fdate_month and be in the format YYYY


group keyword Show only properties that have this group keyword
hidefooter yes, no Do not show the property information at the bottom of the page
hideheader yes, no Do not show the property information at the top of the page. Do not use this option when using a "Full Width Slider".


hideoffer 1,2,3,4 Do not show this offer on the booking page, multiple id's can be specified with a comma separating them.
hideprop property id Do not show this property on the booking page, multiple id's can be specified with a comma separating them.
hideroom room id Do not show this room on the booking page, multiple id's can be specified with a comma separating them.
invoicee integer Charges and payments will be assigned to this invoicee ID.
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), hy (Armenian), id (Indonesian - Bahasa Indonesia), is (Icelandic), it (Italian), ja (Japanese), ko (Korean), lt (Lithuanian), lv (Latvian) mn (Mongolian), my (Burmese), nl (Dutch), no (Norwegian), pl (Polish), pt (Portuguese), ro (Romanian), ru (Russian), sk (Slovak), sl (Slovenian), sr (Serbian), sv (Swedish), th (Thai), tr (Turkish), vi (Vietnamese), zh (Chinese simplified), zt (Chinese traditional) Sets the default language to open the booking page. (2013 new style booking pages only)
layout 1, 2, 3, 4, 5, 6, Opens the responsive version of the booking page in this layout.


maxprop number of properties Show a maximum of this many properties based on the sort order. Additional properties are hidden.


maxroom number of rooms Only show a maximum of this many rooms based on the sort order. Additional rooms are hidden.
mobile=1 mobile view Display the booking page in mobile view
mobile=0 desktop view Display the booking page in desktop view
multiroom 0, 1 Opens the page with multi-room booking selected or unselected. (2013 new style booking page only)
numnight number of nights Initial value for the number of nights selector
numadult number of adults Initial value for the number of adults selector
numchild number of children Initial value for the number of children selector


numdisplayed number of nights with prices displayed Only applies to price table pages, use this to reduce the number of nights for narrow designs
nogroup keyword Exclude properties that have this group keyword


ownerid id number of owner. The page will open showing all properties and rooms for this owner
propid id number of property. The page will open showing this property.
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.
referer text This text will be recorded with any bookings originating from this widget allowing tracking of booking sources
roomid id number of room. The page will open showing this room.
toproom room always shown on the top of the bookingpage you can add mulitpel room IDs separated by a comma (resposive booking page only)
voucher voucher code Pre populates the discount voucher code
width page width in px Useful for embedding the booking page in an Iframe of fixed size

6 Customise Booking Widgets

Code snippets for booking widgets are available in (SETTINGS) BOOKING ENGINE > BOOKING WIDGETS.

You can use HTML and CSS to create custom solutions.

Make Your Own Booking Widget


Wordpress

If you use the Beds24 Wordpress plugin booking widgets and booking page can be added via a short code. Options and help regarding customisation can be found directly in the plugin settings.

Old booking page only:

|- | hidename || yes, no || Do not show the property name heading

|- | hidedesc || yes, no || Do not show the description

7 Custom Applications / API

We also have an API which allows developers to develop their own applications and solutions.

The API functions are available at https://api.beds24.com

The documentation is directly in the API.

To use the API you need to allow API access. Go to This page is about the menu (SETTINGS) > ACCOUNT -> ACCOUNT ACCESS and allow API access. The API is available at https://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 This page is about the menu (SETTINGS) > ACCOUNT and This page is about the menu (SETTINGS) > PROPERTIES > ACCESS

8 Skip to Checkout Page from Beds24 Plugin Widget

You can bypass the booking page and redirect the widget directly to the checkout page by adding this parameter

customParameter:'br1-xxxx=book'

to the widget.

Replace xxxx with the room ID of the room you want to populate.

9 Create a website with the content in your Beds24 account

We have an integration with Rezintel which allows users/developers to create a website with the data you have in Beds24.

Go to Website builder for more details.

10 Suppress Google Translate

Add the following in the "Head" section:

<meta name=“google” content=“notranslate”> <html translate=“no”>

Subcategories

This category has the following 2 subcategories, out of 2 total.

A

W

Retrieved from "https://wiki.beds24.com/index.php?title=Category:Developers&oldid=23369"