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 a Script Tag with the jQuery Javascript Library (at least version 1.12.3) and another with the Official Whitelabel JavaScript Library. Place this Script Tags at the end of the area.

Endpoint URL

The only official Whitelabel URL currently supported is https://ui.openbooking.ch/ui/v1/server/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 --->
<!---
jQuery and Whitelabel Solution JavaScript,
put the script tags at the end of the <body> area
--->
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://ui.openbooking.ch/ui/v1/server/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-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.