White Label

White Label vs. Build-your-own-UI
Use our White Label
Advantages
Build your own UI
Advantages
Drawbacks
Integration Guide
Getting started
List View
Detail View
Integration
HTML-Code
Tag-Parameters
Full page code example
Customization
CSS Classes
Examples
Build your own search forms
Supported URL parameters
Ready!

White Label vs. Build-your-own-UI

Use our White Label

Advantages

Zero additional expenses with new offer types or booking provider
Zero additional expenses with new regions
Zero expenses for continuous development
Ready for use within a few hours
Latest features are added to the OpenBooking whitelabel first
Occupancy calendar included by default
Export stock data to your CRM for free
Implementation in minutes and at no costs
Real-Time search and autosuggest included
Customize the whitelabel to your visual needs or CI
Image processing service included

Drawbacks

Not as customizable as an individual interface
Data export limited to stock data

Build your own UI

Example of a custom user interface implemented by Switzerland Tourism for MySwitzerland.com

Advantages

Build your own offer search on top of OpenBooking
Zero costs for booking provider connection maintenance
Access every data set in OpenBooking
Fully documented interface reference
Build websites and apps
Get the latest features via API first
Image processing service license for your custom integration
Export stock data, regions and availabilities directly into your Website/CMS

Drawbacks

Building your own interface often leads to additional expenses
Interface sometimes needs to be adopted to the new features or settings
New whitelabel features need to be added by your agency
Usually ready for use after long-term development

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.

List View

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.

HTML-Code

<div
 data-whitelabel
 data-lang = "fr"
 data-group="{YOUR-API-KEY}"
 data-currency = "CHF"
/>    

<script src="https://ui.openbooking.ch/ui/v1/server/ob-whitelabel.js"></script>

Tag-Parameters

The configuration is done using data attributes, the following parameters are available.

	Usage
data-whitelabel	Must be present for the White Label to work. Required.
data-group	Your API key to authenticate the White Label against the OpenBooking API. Required.
data-lang	Language in which the UI should be displayed. Currently available: de, en, it, fr. Default is: en.
data-currency	The default currency to be used. Currently available: CHF, EUR, USD. Default: 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. Format: YYYY-MM-DD.
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. Format: YYYY-MM-DD.
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 place, is used if no defaultplace is defined via the URL API. Parameter is optional. The place 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	Used, if no accommodations were found for “defaultplace”. Parameter is optional. The place 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. Default: False
data-masterdataview	Set to "false" if you do not want to list all accommodations without an availability query. Default: true
data-tags	If provided the White Label will retrieve only accommodations for the specified tags. Pass a comma-separated string.
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. These 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. Default: false
data-showcontactinfo	If provided the contact details will be displayed on the detail page if an email, street or phone is available. Default: 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). Default: true.

Full page code 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

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

Examples

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

⚠️

Bad practice

While you can technically overwrite any CSS class in out White Label, we advice you to only use the classes documented above. Undocumented CSS are subject to change any time. If you are in need of a special customization, please get in touch with us and we will find a solution.

Build your own search forms

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

Supported URL parameters

Parameter	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. 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.	&children=4,12 meaning: 2 children with the age of 4 and 12.
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	Overwrites the default language defined in "data-language”	&langauge=fr
currency	Overwrites the default currency defined in "data-currency".	&currency=EUR
type	Overwrites the default type defined in "data-type".	type=apartments,bnb
place	Overwrites the default place defined in "data-defaultplace".
fallbackplace	Overwrites the default fallbackplace defined in "data-fallbackplace".
enabletrustyou	Enable TrustScore-Widget display in list and detail page.
tags	this will overwrite the tags specified by data-tags	&tags=familyfriendly,campaign2025
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.	&accosWithoutMinprice=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
hs	Hide the search box when set to “1”	hs=1

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.