The Beds24 booking page can be embedded in a page with an iframe or opened with a link or form, and developers can fully customise it: exchange its fixed texts, add CSS and JavaScript, and control its behaviour with URL parameters. Most options are in Settings > Booking Engine > Property Booking Page > Developer.
Contents
- Custom text
- Custom CSS
- External CSS file
- JavaScript
- Booking page parameters
- Customise booking widgets
- Custom applications and API
- Create a website with your Beds24 content
- Suppress Google Translate
Custom text
Exchange any fixed text on the booking page in Settings > Booking Engine > Property Booking Page > Developer > Custom Text. For more information, read the context help (question mark icon).
Custom CSS
Add custom CSS in Settings > Booking Engine > Property Booking Page > Developer > Custom CSS. For a list of CSS examples, see How to use Custom CSS.
External CSS file
The booking page can use a CSS file you supply, for example to use different styling per page or site. Host the CSS file on a secure web server (https): the secure Beds24 booking page only accepts an external stylesheet from a secure site.
- Host your CSS file, for example at
https://yoursite/path/your.css. - URL-encode the file's URL, for example with the meyerweb URL encoder.
- Add the result as the
&cssfileparameter to the booking page URL, or for example to the iframesrc:&cssfile=https%3A%2F%2Fyoursite%2Fpath%2Fyour.css
Expected result: The booking page includes your CSS file.
JavaScript
Enter JavaScript in Settings > Booking Engine > Property Booking Page > Developer, or in Settings > Booking Engine > Multi Booking Page > Developer > Advanced HTML Settings.
Redirects
This example makes property 1234 open in the parent window (frame busting) when its book button is clicked on the multiple property page:
<script>
$(document).ready(function(){
$('#propid1234 a').attr('target', '_parent');
});
</script>Tip: Check the settings in Settings > Booking Engine > Property Booking Page > Behaviour before you add such a script.
Change the title text
<script>document.title='your title';</script>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>Change the first day of the week in the datepicker
The start day of the week in the check-in and check-out selectors is set automatically from the language the guest selects, because languages have different standards. You can override it per language.
This example makes English start on Monday. The value of dow can be from 0 to 6, where 0 is Sunday. To change multiple languages, include a script for each language.
<script>
moment.updateLocale("en", { week: {
dow: 1
}});
</script>Booking page parameters
Control the behaviour of the booking page with parameters passed in the URL or form, for example the preselected dates, number of guests, rooms shown, language and currency. For all parameters and example links, see Booking page URL parameters.
Customise booking widgets
Code snippets for booking widgets are in Settings > Booking Engine > Booking Widgets. You can use HTML and CSS to create custom solutions. See Make Your Own Booking Widget.
Skip to the checkout page from a Beds24 plugin widget
To bypass the booking page and send the widget straight to the checkout page, add this parameter to the widget:
customParameter:'br1-xxxx=book'Replace xxxx with the room ID of the room you want to populate.
WordPress
If you use the Beds24 WordPress plugin, you can add booking widgets and the booking page with a shortcode. Options and help for customisation are in the plugin settings.
Custom applications and API
Developers can use the Beds24 API to develop their own applications and solutions. See How to use API. For the older API V1 functions at api.beds24.com, including how to allow API access and set the API and prop keys, see Allow API access.
Create a website with your Beds24 content
With the Rezintel integration, users and developers can create a website with the data in their Beds24 account. See Rezintel Website Builder.
Suppress Google Translate
Add the following in the Head section:
<meta name="google" content="notranslate">
<html translate="no">