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 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.3 Shadow Around your Booking Page (Adaptive Booking Page Only)

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

/*code for a shadow arround 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.4 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.5 Show prices with cents even if cents are zero

.bookingpagecentshide {display:inline;}

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

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

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