Category:Developers

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

• Any fixed text on the booking page can be exchanged in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom Text"

1 Custom CSS

• Custom CSS can be added in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom CSS"

1.1 Bigger Room Name

/*code for bigger room name*/
.at_roomnametext{
font-size: 14px /*if you want the text even bigger use a higher number*/
}

1.2 Disable click on calendar

.roomoffercalendarmonth{
 pointer-events: none;
}

.monthcalendarhead{
pointer-events: auto;
}

1.3 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;
}

1.4 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);
}

1.5 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*/

#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;	
}

1.6 Booking Page with Rounded Corners (Adaptive Booking Page Only)

Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS"

/*code for rounded corners*/

#bookingpage {
border-radius: 7px;
-webkit-border-radius: 7px;	
-moz-border-radius: 7px;		
}

1.7 Hide cents

.bookingpagecents {display:none;}

1.8 Show prices with cents even if cents are zero

.bookingpagecentshide {display:inline;}

1.9 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.

1.10 Add a border around the selected dates

.datestay {border: 1px solid #2f2f2f !important;}

1.11 Line through unavailable dates

.datenotavail {
text-decoration: line-through;
}

1.12 Change width of hover image (adaptive booking page only

.ui-tooltip {
 max- width: 500px;}

1.13 Remove the hover effect on pictures (adaptive booking page only)

img { pointer-events: none; }

1.14 Add a label above the room selector for multiple room bookings (responsive booking page only)

.roomofferqtyselectlabel {
display: block;}

1.15 Hide up button (responsive booking page only)

footer .button{
display: none;
}

1.16 Add icons to descriptive texts (responsive booking page only)

Bootstrap glyphicons and Font Awesome icons can be added to the descriptive fields. To add icons the editor needs to be set to "Source"

Examples:

<span class="glyphicon glyphicon-user" aria-hidden="true"></span> will add a Bootstap icon for a person.

<i class="fa fa-bicycle" aria-hidden="true"></i> 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.

1.17 Hide icons (responsive booking page only)

.b24fa{
display: none; 
}

#b24scroller .input-group-addon{
display: none; 
}

1.18 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.

2 Javascript

• Javascript can be entered in SETTINGS->BOOKING PAGE ->DEVELOPERS"Advanced HTML Settings"

3 Custom Applications

• The API can be used to develop custom applications and solutions.

4 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://www.beds24.com/booking2.php?propid=2047

to

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=2047&hideheader=yes

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

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
roomid	id number of room.	The page will open showing this room.
propid	id number of property.	The page will open showing this property.
ownerid	id number of owner.	The page will open showing all properties and rooms for this owner
checkin	check-in full date	The page will open at this check-in date
mobile=0	desktop view	Display the booking page in desktop view
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
mobile=1	mobile view	Display the booking page in mobile view
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
width	page width in px	Useful for embedding the booking page in an iframe of fixed size
numdisplayed	number of nights with prices displayed	Only applies to price table pages, use this to reduce the number of nights for narrow designs
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.
hideheader	yes, no	Do not show the property information at the top of the page
hidefooter	yes, no	Do not show the property information at the bottom of the page
multiroom	0, 1	Opens the page with multi-room booking selected or unselected. (2013 new style booking page only)
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 (Portuguese), 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)
hideprop	property id	Do not show this property on the booking page, multiple id's can be specified with a comma separating them.
maxprop	number of properties	Show a maximum of this many properties based on the sort order. Additional properties are hidden.
hideroom	room id	Do not show this room on the booking page, multiple id's can be specified with a comma separating them.
maxroom	number of rooms	Only show a maximum of this many rooms based on the sort order. Additional rooms are hidden.
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.
group	keyword	Show only properties that have this group keyword
nogroup	keyword	Exclude properties that have this group keyword
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)
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.

5 Customise 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.

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

6 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

7 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 ACCES. Go to 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 SETTINGS->ACCOUNT and SETTINGS->PROPERTIES->LINK