White Label Integration Guide

Getting started
The OpenBooking Whitelabel Solution has been designed to define a standard how to make the best use of our SDK to enable a modern, user-friendly and fast accommodation search, using state-of-the-art technologies like Sass, ES6 and Responsive / Adaptive Design and a Build-Step.
During the development, care was taken that the solution can be easily integrated into the customer's website by still being flexible.
The Whitelabel solution is constantly being further developed and works entirely on the base of our OpenBooking API, so it can be viewed as a reference implementation.
Search Results View
Detail View
While most Whitelabels use <IFRAME>s, OpenBooking offers the Whitelabel as a full JavaScript-only solution which fully integrates into your website and offers all the advantages of local content like SEO etc.
The Whitelabel is fully hosted at OpenBooking. The following guide describes how to integrate the Whitelabel into your website.
Integration
In order to integrate the OpenBooking Whitelabel solution, a Div element must be created in the customer's site, which is given the data attribute data-whitelabel.
The configuration is done using data attributes, the following parameters are available.
Attribute
Usage
Remarks
data-whitelabel
This attribute must be present for the whitelabel to work
no value, attribute is required
data-lang
Language in which the UI should be displayed. Currently available: de, en, it, fr
the browser language is used. If this is not possible EN is used as a fallback.
data-group
Your API key to authenticate the Whitelabel against the OpenBooking API
attribute is required
data-currency
The default currency to be used Currently available: CHF
CHF
data-tracktag
Default Tracktag, is used if no track tag is defined via the URL API. Can be omitted. May not start with Underscore (_). Maximum of 30 characters.
​
data-checkin
Default checkin, is used if no checkin is defined via the URL API. Parameter is optional. If not specified here and via the URL, the date of today will be used.
​
data-checkout
Default checkout, is used if no checkout is defined via the URL API. Parameter is optional. If not specified here and via the URL, the date of tomorrow will be used.
​
data-adults
Default adults, is used if no adults is defined via the URL API. Parameter is optional. If not specified here and via the URL, 2 adults will be used.
​
data-children
Default children, is used if no children is defined via the URL API. Parameter is optional. If not specified here and via the URL, 0 childs will be used.
​
data-prefill
Default prefill, is used if no prefill is defined via the URL API. Parameter is optional. If not specified here and via the URL, false will be used.
​
data-type
Show only specified types. If not specified here or via the URL, 'hotel,apartment,bnb,camping,offer' will be used.
​
data-defaultplace
Default defaultplace, is used if no defaultplace is defined via the URL API. Parameter is optional.
the place-id which will used to limit the search-range. if set here or via URL API a second search query will be made using the same search parameters except the place which will be changed to the 'fallbackplace' or to 'no limit'. The Result of this Query will be shown to the Visitor in a section below the Result-List.
data-fallbackplace
Default fallbackplace, is used if no fallbackplace is defined via the URL API. Parameter is optional.
the place-id which will be used as the fallbackplace if not specfied the second query range will not be limited
data-enabletrustyou
Set to "true" to enable TrustScore-Widget display in list and detail page.
false
data-masterdataview
Set to "false" if you do not want to list all accommodations without an availability query.
true
data-tags
if provided the OB-Whitelabel will retrieve on accommodations for the specified tags.
a comma-separated list with tags
data-offset
Provide a integer or name of a global stored function which returns an integer. If you select a date in the calendar on the detail site, the site will be scrolled down, use this param to add an offset to this logic to prevent problems with a sticky header ( use the height of your header ) If you provide 2 or 3 values the values will be used like this: 3 values like 1,2,3 the system will set the offset for mobile to 1, for tablet to 2 and for desktop to 3. if you provide 2 values like 4,5 the system will set the offset for mobile to 4 and tablet to 5 desktop will be set to 0 this means no offset. if you provide a single value this value will be used for all 3 modes.
this are the possible combinations: 1 → set mobile, tablet and desktop offset to 1 2,2 → set mobile, tablet to 2 and desktop to 0 1,2,3 → set mobile to 1, tablet to 2 and desktop to 3
data-accommodation
If an accommodation id is provided the whitelabel is directly redirected to the detail page of this accommodation
​
data-showplacesalways
If provided the suggestbar always show the first 5 places even if a user typed in a search key or not
false
data-showcontactinfo
If provided the contact details will be displayed on the detail page if an email, street or phone is available.
false
data-accos-without-minprice
if provided and set to false only accommodations with a minprice will be displayed in masterdataview ( accommodations without an availability query)
true
To load the OpenBooking Whitelabel Solution, you need to add the Official Whitelabel JavaScript Library. Place this Script Tag at the end of the  area.
Endpoint URL
The only official Whitelabel URL currently supported is 
https://ui.openbooking.ch/ob-whitelabel.js​
Example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OB-Whitelabel</title>
  </head>
  <body>
    <!--- your header/navigation here etc. --->
​
    <!-- Whitelabel Solution Div -->
    <div
     data-whitelabel
     data-lang = "fr"
     data-group="{YOUR-API-KEY}"
     data-currency = "CHF"
    />    
​
    <!--- your footer here --->
​
   <script src="https://ui.openbooking.ch/ob-whitelabel.js"></script>
​
  </body>
</html>
Customization
Custom CSS Classes
The White Label basecontainer with the classes bootstrap-pxl and openbooking-whitelabel-pxl has a predefined zindex of 99.
Use the Custom CSS Classes for better access of HTML elements and simple customizations such as color, size, and style customization are possible using CSS custom style classes. These can be written to your CSS file and configured individually.
The following CSS custom-style classes are currently available:
Class
Usage
.ob-custom-search-container
Is attached to the upper search-bar's <div>
.ob-custom-main-container
Is attached to the <div>,with the result list and the filter
.ob-custom-detail-container
Is attached to the detail page's main <div>
.ob-custom-search
Is attached to the Whitelabel Solution Navbar with the individual search parameters.
.ob-custom-list--features
A feature element in the result list
.ob-custom-WhitelabelModal
Is attached to each modal window to better access elements inside this windows
.ob-custom-btn
Is attached to all buttons
.ob-custom-btn--detail
Is attached to the detailview button of each result
.ob-custom-btn--filter
Is attached to the filter button inside the navbar
.ob-custom-btn--map
Is attached to the map button inside the navbar
.ob-custom-btn-modal--back
Is attached to the back button inside the modal windows (X sign)
.ob-custom-btn-modal--accept
Is attached to the accept button inside the modal windows
.ob-custom-btn-modal--reset
Is attached to the reset button inside the modal windows
.ob-custom-calendar--range
Is attached to each day which is selected inside the datepicker modal
.ob-custom-calendar--range-start
Is attached to the start day which is selected inside the datepicker modal
.ob-custom-calendar--range-end
Is attached to the end day which is selected inside the datepicker modal
.ob-custom-input--datepicker
Is attached to the date and adults input container inside the navbar
.ob-custom-input--suggest
Is attached to the suggestion search input container inside the navbar
.ob-custom-input--sort
Is attached to the sort input container inside the navbar
Use case: restrict the size of all whitelabel elements to a certain width (i.e. 960px):
.ob-custom-search-container, .ob-custom-main-container, .ob-custom-detail-container {
  max-width:960px;
}
Work in progress
Custom CSS classes are work in progress and will be extended in the future. If you are in need of a special customization, please get in touch with us.
Search form parameters
You can pass values via URL query parameter. For example, to enable quick-booking forms. We have implemented an URL API, which sets the corresponding search parameters if they are valid (parameters are validated beforehand).
Query param
Usage
Example
checkin
Checkin date in the following format: YYYYMMDD.
&checkin=20160701
checkout
Checkout date in the following format: YYYYMMDD.
&checkout=20160703
adults
Number of adults.
&adults=2
children
For every child, pass the age as a comma-separated list.
&children=4,12 meaning 2 children with the age of 4 and 12. If you do not know the age of the children, it is recommended to pass "12" as a default age. If no children are specified, you can either send the field with no value or omit the field.
prefill
true / false, default is false. Set to true if you do not want the search to start immediately but only prefill the search form.
&prefill=true
tag
Tracktag Overwrites the default track tag defined in "data-tracktag". Do not start with Underscore (_). Can be omitted. Maximum of 30 characters.
&tag=minibookform
language
language Overwrites the default language defined in "data-language".
see Integration for details
currency
currency Overwrites the default currency defined in "data-currency".
see Integration for details
type
type Overwrites the default type defined in "data-type".
use this to overwrite the type of the search. Possible values are: hotel,apartment / hotel / apartment
place
place Overwrites the default place defined in "data-defaultplace".
see Integration for details
fallbackplace
fallbackplace Overwrites the default fallbackplace defined in "data-fallbackplace".
see Integration for details
enabletrustyou
Enable TrustScore-Widget display in list and detail page.
false
tags
this will overwrite the tags specified by data-tags
a comma-separated list with tags
stars
Use this to filter the results by their star rating. For example to show all accommodations with a rating of 5 stars.
&stars=5,4,3
features
Use this to filter the results by their features. For example to show all accommodations with a balcony. You must use the feature-name from the OpenBooking Admin, you can find it in the features Section.
&features=parking,bar-lounge,sauna/turkish bath
showplacesalways
If provided the suggestbar always show the first 5 places even if a user typed in a search key or not
&showplacesalways=true
accosWithoutMinprice
if provided this will overwrite the data-accos-without-minprice setting.
false
room
Use this to add one or more rooms. The first parameter is always the amount of adults the next parameters are the age of the children.
Add one room &room=2,5,8
Add multiple rooms &room=2,5,8&room=1,9
Note that the search will only be executed if:
at least checkin, checkout and adults are specified and valid
prefill is not set to true
Passing values from an external form
If you build you own search form, you must set the method="GET" attribute in the <FORM> tag to pass the values via URL. Otherwise parameter passing will not work.
Ready!
Now, you're all set.
We're continously extend the functionality of our Whitelabel UI. Please do not heasitate to send us your feedback or ideas, on how to make it better.

Last modified 1yr ago

Attribute	Usage	Remarks
`data-whitelabel`	This attribute must be present for the whitelabel to work	no value, attribute is required
`data-lang`	Language in which the UI should be displayed. Currently available: de, en, it, fr	the browser language is used. If this is not possible EN is used as a fallback.
`data-group`	Your API key to authenticate the Whitelabel against the OpenBooking API	attribute is required
`data-currency`	The default currency to be used Currently available: CHF	CHF
data-tracktag	Default Tracktag, is used if no track tag is defined via the URL API. Can be omitted. May not start with Underscore (_). Maximum of 30 characters.
data-checkin	Default checkin, is used if no checkin is defined via the URL API. Parameter is optional. If not specified here and via the URL, the date of today will be used.
data-checkout	Default checkout, is used if no checkout is defined via the URL API. Parameter is optional. If not specified here and via the URL, the date of tomorrow will be used.
data-adults	Default adults, is used if no adults is defined via the URL API. Parameter is optional. If not specified here and via the URL, 2 adults will be used.
data-children	Default children, is used if no children is defined via the URL API. Parameter is optional. If not specified here and via the URL, 0 childs will be used.
data-prefill	Default prefill, is used if no prefill is defined via the URL API. Parameter is optional. If not specified here and via the URL, false will be used.
data-type	Show only specified types. If not specified here or via the URL, 'hotel,apartment,bnb,camping,offer' will be used.
data-defaultplace	Default defaultplace, is used if no defaultplace is defined via the URL API. Parameter is optional.	the place-id which will used to limit the search-range. if set here or via URL API a second search query will be made using the same search parameters except the place which will be changed to the 'fallbackplace' or to 'no limit'. The Result of this Query will be shown to the Visitor in a section below the Result-List.
data-fallbackplace	Default fallbackplace, is used if no fallbackplace is defined via the URL API. Parameter is optional.	the place-id which will be used as the fallbackplace if not specfied the second query range will not be limited
data-enabletrustyou	Set to "true" to enable TrustScore-Widget display in list and detail page.	false
data-masterdataview	Set to "false" if you do not want to list all accommodations without an availability query.	true
data-tags	if provided the OB-Whitelabel will retrieve on accommodations for the specified tags.	a comma-separated list with tags
data-offset	Provide a integer or name of a global stored function which returns an integer. If you select a date in the calendar on the detail site, the site will be scrolled down, use this param to add an offset to this logic to prevent problems with a sticky header ( use the height of your header ) If you provide 2 or 3 values the values will be used like this: 3 values like 1,2,3 the system will set the offset for mobile to 1, for tablet to 2 and for desktop to 3. if you provide 2 values like 4,5 the system will set the offset for mobile to 4 and tablet to 5 desktop will be set to 0 this means no offset. if you provide a single value this value will be used for all 3 modes.	this are the possible combinations: 1 → set mobile, tablet and desktop offset to 1 2,2 → set mobile, tablet to 2 and desktop to 0 1,2,3 → set mobile to 1, tablet to 2 and desktop to 3
data-accommodation	If an accommodation id is provided the whitelabel is directly redirected to the detail page of this accommodation
data-showplacesalways	If provided the suggestbar always show the first 5 places even if a user typed in a search key or not	false
data-showcontactinfo	If provided the contact details will be displayed on the detail page if an email, street or phone is available.	false
data-accos-without-minprice	if provided and set to false only accommodations with a minprice will be displayed in masterdataview ( accommodations without an availability query)	true

Class	Usage
.ob-custom-search-container	Is attached to the upper search-bar's `<div>`
.ob-custom-main-container	Is attached to the `<div>`,with the result list and the filter
.ob-custom-detail-container	Is attached to the detail page's main `<div>`
.ob-custom-search	Is attached to the Whitelabel Solution Navbar with the individual search parameters.
.ob-custom-list--features	A feature element in the result list
.ob-custom-WhitelabelModal	Is attached to each modal window to better access elements inside this windows
.ob-custom-btn	Is attached to all buttons
.ob-custom-btn--detail	Is attached to the detailview button of each result
.ob-custom-btn--filter	Is attached to the filter button inside the navbar
.ob-custom-btn--map	Is attached to the map button inside the navbar
.ob-custom-btn-modal--back	Is attached to the back button inside the modal windows (X sign)
.ob-custom-btn-modal--accept	Is attached to the accept button inside the modal windows
.ob-custom-btn-modal--reset	Is attached to the reset button inside the modal windows
.ob-custom-calendar--range	Is attached to each day which is selected inside the datepicker modal
.ob-custom-calendar--range-start	Is attached to the start day which is selected inside the datepicker modal
.ob-custom-calendar--range-end	Is attached to the end day which is selected inside the datepicker modal
.ob-custom-input--datepicker	Is attached to the date and adults input container inside the navbar
.ob-custom-input--suggest	Is attached to the suggestion search input container inside the navbar
.ob-custom-input--sort	Is attached to the sort input container inside the navbar

Query param	Usage	Example
checkin	Checkin date in the following format: YYYYMMDD.	&checkin=20160701
checkout	Checkout date in the following format: YYYYMMDD.	&checkout=20160703
adults	Number of adults.	&adults=2
children	For every child, pass the age as a comma-separated list.	&children=4,12 meaning 2 children with the age of 4 and 12. If you do not know the age of the children, it is recommended to pass "12" as a default age. If no children are specified, you can either send the field with no value or omit the field.
prefill	true / false, default is false. Set to true if you do not want the search to start immediately but only prefill the search form.	&prefill=true
tag	Tracktag Overwrites the default track tag defined in "data-tracktag". Do not start with Underscore (_). Can be omitted. Maximum of 30 characters.	&tag=minibookform
language	language Overwrites the default language defined in "data-language".	see Integration for details
currency	currency Overwrites the default currency defined in "data-currency".	see Integration for details
type	type Overwrites the default type defined in "data-type".	use this to overwrite the type of the search. Possible values are: hotel,apartment / hotel / apartment
place	place Overwrites the default place defined in "data-defaultplace".	see Integration for details
fallbackplace	fallbackplace Overwrites the default fallbackplace defined in "data-fallbackplace".	see Integration for details
enabletrustyou	Enable TrustScore-Widget display in list and detail page.	false
tags	this will overwrite the tags specified by data-tags	a comma-separated list with tags
stars	Use this to filter the results by their star rating. For example to show all accommodations with a rating of 5 stars.	&stars=5,4,3
features	Use this to filter the results by their features. For example to show all accommodations with a balcony. You must use the feature-name from the OpenBooking Admin, you can find it in the features Section.	&features=parking,bar-lounge,sauna/turkish bath
showplacesalways	If provided the suggestbar always show the first 5 places even if a user typed in a search key or not	&showplacesalways=true
accosWithoutMinprice	if provided this will overwrite the data-accos-without-minprice setting.	false
room	Use this to add one or more rooms. The first parameter is always the amount of adults the next parameters are the age of the children.	Add one room &room=2,5,8 Add multiple rooms &room=2,5,8&room=1,9