Changes

[[Category:How toBooking_Engine]][[Category:Wordpress]]<div class="heading">Developer Options</div> ''This page is about the menu {{#fas:cog}} (SETTINGS -) > BOOKING PAGE ENGINE -> DEVELOPERS''Code snippets for the booking page are available in SETTINGS-> PROPERTY BOOKING PAGE.> DEVELOPERS

The booking page can be embedded in a page using an iframe Iframe or opened with a link or form. It can be fully customised in This page is about the menu {{#fas:cog}} (SETTINGS-) >BOOKING PAGEENGINE. This [[Customise_Booking_Page|page]] gives an overview. Additional options for developers are:

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 ->DEVELOPERS DEVELOPER > "Custom Text" For more information please read the context help (?).

*<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 === /*code for bigger room name*/ .at_roomnametext{ font-sizeTo see a list of CSS examples look into this document: 14px /*if you want the text even bigger use a higher number*/ }[[Custom_CSS|Custom CSS]]

=== Disable click on calendar=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:).roomoffercalendarmonth{ pointer-events: none; }

To do this you need to add the &cssfile parameter to the URL for the booking page, or for example the Iframe SRC.monthcalendarhead{ pointer-events: auto; }

=== Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis===To use You could do 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 ratesuse different styling per page or site.

NOTEFor example if your css file is: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this functionhttps://yoursite/path/your.css

.datenco{ background-colorGo to this site and encode it: #f4f4f4; colorhttp: #cccccc; }//meyerweb.com/eric/tools/dencoder/

Add the resulting parameter to the booking page URL like this:&cssfile=== 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%3A%2F%2Fyoursite%2Fpath%2Fyour.css

/*code fo use an image as background*/ body { background-image:url(https://wwwYour CSS file will be included.beds24.com/pic/p0000/2049/04.jpg); }

<span class="" style== Shadow Around your Booking Page "color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> The external stylesheet needs to be hosted on a secure site (Adaptive Booking Page Onlyhttps)===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)=Javascript ==Add code Javascript can be entered in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS" /*code for rounded corners*/ <nowiki>#</nowiki>bookingpage This page is about the menu { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; } === Hide cents===  .bookingpagecents {display#fas:none;cog} === 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  (SETTINGS)> BOOKING ENGINE .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  PROPERTY BOOKING PAGE > .daysat DEVELOPERS or in {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-decorationfas: line-through; cog} === Change width of hover image (adaptive booking page only=== .ui-tooltip { max- width: 500px;} === Remove the hover effect on pictures (adaptive booking page onlySETTINGS)===img {pointer-events: none;}>BOOKING ENGINE > MULTI BOOKING PAGE> DEVELOPER "Advanced HTML Settings"

=== Add a label above the room selector for multiple room bookings (responsive booking page only)Redirects === .roomofferqtyselectlabel { displayFor example: block;}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

=== Hide up button <script>$(responsive booking page onlydocument)=== footer .buttonready(function(){ display: none$('#propid1234 a').attr('target', '_parent'); });</script>

<span style=== Add icons to descriptive texts (responsive booking page only)===[https"color: #f3e504; font-size://getbootstrap.com/docs/3.3/components/250%;" >{{#glyphicons Bootstrap glyphicons] and [httpfas:lightbulb}} <//fontawesome.io/icons/ Font Awesome icons] can be added to span> Check the descriptive fieldssettings under {{#fas:cog}} (SETTINGS) >BOOKING ENGINE > PROPERTY BOOKING PAGE > BEHAVIOUR before you add such a script. To add icons the editor needs to be set to "Source"

<nowikiscript><span class="glyphicon glyphicon-user" aria-hiddendocument.title="true"></span>'your title';</nowikiscript>will add a Bootstap icon for a person.

<nowiki><i class="fa fa-bicycle" aria-hidden="true"></i></nowiki>= Change date format ===will add a Font Awesomeicon for a bicycleJavascript to change the date format.

=== Hide icons <script>$(responsive booking page onlydocument)=== .b24faready(function(){ display: none; }

$('#b24scroller inputcheckin').inputdata('date-groupformat','MMMM DD, YYYY');$('#inputcheckout').data('date-addon{ display: noneformat','MMMM DD, YYYY'); })</script>

<script>window.onload =function() {$("[id^== Change 'ptdate']").text color of language selector and currency selector (responsive booking page onlyfunction(i, t)==={ #topofthebookingpage{return t.split(' ').reverse().join(' '); color: #ffffff }) };

exchange ffffff with the hex code of the color you want to usewindow.== External CSS file onunload ==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 function(using https:).{};</script>

To do this you need to add === Change the first day of the week in the datepicker===The start day of the week in the &cssfile parameter to checkin and checkout selectors is set automatically based on the URL for language selected by the booking pageguest, or different languages have different standards for example the iframe SRCthis.It is possible to override it on a per language basis.

You could do this This example changes English to use different styling per page or sitestart 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.

For example if your css file is:<script>https://yoursite/path/yourmoment.css Goto this site and encode it:http://meyerweb.com/eric/tools/dencoder/ Add the resulting parameter to the booking page URL like thisupdateLocale("en", { week:{&cssfile=https%3A%2F%2Fyoursite%2Fpath%2Fyour.css Your CSS file will be included. Notedow:1 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 ==* Javascript can be entered in SETTINGS->BOOKING PAGE -</script>DEVELOPERS"Advanced HTML Settings"

*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://www.beds24.com/booking2.php?propid=2047&numnight=7  '''Example: hide header''' https://www.beds24.com/booking2.php?propid=2047 to

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

https://www.beds24.com/booking2.php?propid=13437&checkin=2017-8-24&numnight=3

https://www.beds24.com/booking2.php?checkin=2017-8-24&numnight=3&numadult=2&numchild=0&br1-32919=Book&roomid=32919

https://www.beds24.com/booking2.php?propid=13434&checkin_hide=2016-11-24&numnight=2&numadult=1&br1-32906=Book

| 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

| roomid advancedays || id number of room. days || The 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 open showing this roombe the current date. The first date with availability can be specified by setting advancedays to the value -1.

| propid checkin || id number of property. check-in full date || The page will open showing at this property. check-in date

| ownerid cssfile || id number of owner. encoded url || The External css file for inclusion in booking page will open showing all properties , the file must be available via a secure url (https) and rooms for this ownerthe url must be url encoded. (http://meyerweb.com/eric/tools/dencoder/)

| checkin cur || check-in full date 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|| The Opens the page will open at this check-in date  |-| mobile=0 || desktop view || Display showing the currency converted. (responsive booking page in desktop viewonly)

| mobile=1 group || keyword || Show only properties that have this group keyword  |-| mobile view hidefooter || Display yes, no || Do not show the property information at the bottom of the booking page in mobile view

| numnight hideheader || number of nights yes, no || Initial value for Do not show the number property information at the top of nights selector the page. Do not use this option when using a "Full Width Slider".  

| numadult hideoffer || number of adults 1,2,3,4 || Initial value for Do not show this offer on the number of adults selector booking page, multiple id's can be specified with a comma separating them.

| numchild hideprop || number of children property id || Initial value for Do not show this property on the number of children selectorbooking page, multiple id's can be specified with a comma separating them.

| width hideroom || page width in px room id || Useful for embedding Do not show this room on the booking page in an iframe of fixed size , multiple id's can be specified with a comma separating them.

| numdisplayed invoicee || number of nights with prices displayed integer || Only applies Charges and payments will be assigned to price table pages, use this to reduce the number of nights for narrow designsinvoicee ID.

| referer lang || text 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), 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) ||This text will be recorded with any bookings originating from this widget allowing tracking of Sets the default language to open the booking page. (2013 new style booking sourcespages only)

| invoicee layout || text 1, 2, 3, 4, 5, 6, ||Charges and payments will be assigned to Opens the responsive version of the booking page in this invoiceelayout. 

| advancedays maxprop || number of days properties || This will set the initial date to Show a maximum of this many days in advance of today. Only applies the first time properties based on the page is openedsort order. If advancedays is not used the initial date will be the first date with availabilityAdditional properties are hidden. 

| layout maxroom ||1, 2, 3, 4, 5, 6, number of rooms || Opens the responsive version Only show a maximum of this many rooms based on the booking page in this layoutsort order. Additional rooms are hidden.

| hideheader mobile=1 ||yes, no mobile view || Do not show the property information at the top of Display the booking pagein mobile view

| hidefooter mobile=0 ||yes, no desktop view || Do not show the property information at the bottom of Display the booking pagein desktop view

| lang numnight ||en (English), ar (Arabic), number of nights bg (Bulgarian), ca (Catalan), hr (Croatian), cs (Czech), da (Danish), de (German), || Initial value for the number of nights selector  |-| numadult el (Greek), es (Spanish), et (Estonian), fi (Finnish), fr (French), || number of adults he (Hebrew), hu (Hungarian), it (Italian), ja (Japanese), lt (Lithuanian), mn (Mongolian), my (Burmese), nl (Dutch), no (Norwegian), pl (Polish), pt (Portuguese), ru (Russian), sk (Slovak), sl (Slovenian), sr (Serbian), sv (Swedish), th (Thai), tr (Turkish), zh (Chinese) || Sets the default language to open Initial value for the booking page. (2013 new style booking page only)number of adults selector

| hideprop numchild ||property id number of children || Do not show this property on Initial value for the booking page, multiple id's can be specified with a comma separating them.number of children selector 

| maxprop numdisplayed ||number of properties nights with prices displayed || Show a maximum of Only applies to price table pages, use this many properties based on to reduce the sort order. Additional properties are hidden.number of nights for narrow designs

| hideroom nogroup ||room id keyword || Do not show Exclude properties that have this room on the booking page, multiple id's can be specified with a comma separating them.group keyword 

| maxroom ownerid ||id number of rooms owner. || Only show a maximum of The page will open showing all properties and rooms for this many rooms based on the sort order. Additional rooms are hidden. owner

| hideoffer propid ||1,2,3,4 id number of property. || Do not show The page will open showing this offer on the booking page, multiple id's can be specified with a comma separating themproperty.

| group redirect || keyword encoded url || Show only properties that have Redirect to this group keyword 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.

| nogroup referer || keyword text || Exclude properties that have This text will be recorded with any bookings originating from this group keywordwidget allowing tracking of booking sources

| cssfile roomid ||encoded url id number of room. || External css file for inclusion in booking The page, the file must be available via a secure url (https) and the url must be url encoded. (http://meyerwebwill open showing this room.com/eric/tools/dencoder/)

| cur toproom ||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, ZARroom always shown on the top of the bookingpage || Opens the page showing the currency converted. you can add mulitpel room IDs separated by a comma (responsive resposive booking page only)

| redirect width ||encoded url page width in px || 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 Useful for embedding the booking page in an iFrame at your redirect URL as long as the iFrame is not overriding them in it's src url.Iframe of fixed size

Code snippets for booking widgets are available in {{#fas:cog}} (SETTINGS->) BOOKING PAGE-ENGINE >BOOKING WIDGETS.

To use the API you need to allow API ACCESaccess. 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->LINKACCESS  ==Skip to Checkout Page from Beds24 Plugin Widget== Check the following instructions: https://gist.github.com/koryrichardson/55a460ce298ea1879c041e90d1e1e527 == 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 [https://wiki.beds24.com/index.php/Rezintel_Website_Builder Website builder] for more details.