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.

Parameter	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 specified 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	Check-in date in the format YYYYMMDD.	&checkin=20160701
checkout	Check-out date in the 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 ages, pass “12” as a default. If no children are specified, you may omit the field or send it empty.	&children=4,12
prefill	true/false; when true, do not start the search immediately and only prefill the form. Default: false.	&prefill=true
tag	Track tag. Overwrites the default track tag defined in “data-tracktag”. May not start with underscore (_). Optional. Max 30 characters.	&tag=minibookform
language	Overwrites the default language defined in “data-lang”.	&language=fr
currency	Overwrites the default currency defined in “data-currency”.	&currency=EUR
type	Overwrites the default type defined in “data-type”.	&type=apartment,bnb
place	Overwrites the default place defined in “data-defaultplace”.	&place=Zermatt
fallbackplace	Overwrites the default fallback place defined in “data-fallbackplace”.	&fallbackplace=Valais
enabletrustyou	Enable TrustScore widget display in list and detail page.	&enabletrustyou=true
tags	Overwrites the tags specified by “data-tags”. Comma-separated list.	&tags=familyfriendly,campaign2025
stars	Filter results by their star rating.	&stars=5,4,3
features	Filter results by features (slugs from the OpenBooking Admin). Use a comma-separated list; URL-encode names that contain spaces or slashes.	&features=parking,bar-lounge,sauna-turkish-bath
showplacesalways	If provided, the suggest bar always shows the first 5 places even if a user typed a search key or not.	&showplacesalways=true
accosWithoutMinprice	If provided, this overwrites the data-accos-without-minprice setting.	&accosWithoutMinprice=false
room	Add one or more rooms. The first value is the number of adults; the following values are the ages of the children.	Add one: &room=2,5,8Add multiple: &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.