Connecting Booking Engine with your website

By default URL that leads to your reservation interface (booking engine) is https://booking.webbookingpro.com/xxx/

where xxx is your ID visible via “Properties & Rooms”, ID column.

If you want to see multiple properties at same time, you can put them all separated with comma (e.g. 36,18).

If you want to see all properties associated with one account (e.g. resort account) you can use account ID – visible via Accounts – Users – just add prefix “a” – e.g. “a4”.

Although this URL is used by Google when Google Metasearch is used, use this URL just for testing. For real properties having their own website we recommend installing Booking Engine as integrated part of website – not external link. By this we get greater guest trust, full brand awareness and at the end more direct reservations. Click here to see example of some hotels having integrated Booking engine.

Integration with website

If you have WordPress website, click here to download WordPress plugin for easier integration. For any site (including also WordPress) here is a code you have to put in “<body>…</body>” part of you website – in the place where you want to show Booking Engine. Usually this is under “<div id=”content>…</div>”.

<script type="text/javascript">
window.wbpSettings = window.wbpSettings || {};
window.wbpSettings = {
'hotelId': 'xxx', // property ID as described before, can have multiple properties
'language': 'en', // default language - can be en for English, de for German, it for Italian, sl for Slovenian, hr - for Croatian, sr - for Serbian
'currency': 'EUR', // optional, default currency
'showLogo': '0',  // optional, show Logo (if defined) at top. We suggest having logo because of Google visit, but usually hide it on real website
'showFooter': '0', // optional, show footer (if defined) at bottom - usually properties put Google Map. We suggest hide it on real website
'darktheme': '0', // optional, use Dark theme for Dark websites - with dark background
'roomId': 0,  // optional, show only room with specific ID
'priorityRoomId': 0, // optional, show room with specific ID as top room (priority over other room types)
'disableSearch': 0, // optional, default 0, disable selecting checkin/checkout dates
'disableFocus': 0, // optional, default 0, disable focusing first available room
'maxRates': 1, // optional, default 1, number of rates to be visible for each room type before "Show more rates..."
'showAvailableFirst': 1, // optional, default 1, sort room types to show available rooms on the top
'showProperty': 1, // optional, default 1, show property part before room types - we usually also suggest to hide on real websites
'disableCoupons': 0, // optional, default 0, disable coupons
'disableGuests': 0, // optional, default 0, disable number of guest select
'fixedAdults': 0, // optional, fixed number of adults
'fixedChildren': 0, // optional, fixed number of children
'fixedCheckIn': 0, // optional, fixed checkin date - use YYYY-MM-DD
'fixedCheckOut': 0, // optional, fixed checkout date - use YYYY-MM-DD
'showLanguage': 0, // optional, default 0, shows language selector
} </script> <script> fetch('https://booking.webbookingpro.com/asset-manifest.json').then((response) => response.json()).then(({entrypoints}) => { entrypoints.forEach(file => {if (file.endsWith('.css')) { var css = document.createElement('link');css.rel = 'stylesheet';css.href = 'https://booking.webbookingpro.com/' + file;document.head.appendChild(css);} else if (file.endsWith('js')) {var script = document.createElement('script');script.src = 'https://booking.webbookingpro.com/' + file;document.head.appendChild(script);}});}); </script> <div id="wbproot"></div>
Back to Top

Sending parameters to URL via GET

Usually you want to call your URL with some parameters – like some dates set via date pick box on front page – e.g. https://www.hoteldomain.com/book-now/?checkin_date=2024-03-22&checkout_date=2024-03-23

Your URL on your domain and of course https://booking.webbookingpro.com/XXX/? support GET parameters. Almost all of them available via window.wbpSettings are also available as GET. Be aware that GET parameter will overwrite any wbpSettings parameter.
e.g.

&adults=X
&children=X
&language=en
&currency=EUR
&checkin_date=DD/MM/YYYY or &checkin_date=YYYY-MM-DD
&checkout_date=DD/MM/YYYY or &checkout_date=YYYY-MM-DD
&showLogo=1
&showFooter=1
&darktheme=1

e.g link can be https://booking.webbookingpro.com/18/?language=de&checkin_date=2024-03-22 or https://www.hoteldomain.com/book-now/?language=de&checkin_date=2024-03-22

Some other useful parameters are also available:

packageId=xxx - show specific package with ID
rateId=xxx - show specific rate with ID
Back to Top

Customizing style of Booking Engine elements

Generally layout is fixed (although it can also be changed but with some advanced CSS knowledge). Changing colors, font styles is easy and doesn’t require advanced CSS knowledge. You can have to find class name of the element you want to change. E.g. this is for “Reserve” button.

Now add custom CSS code – here is example how to change background color of Buttons.

<style>
.MuiButton-containedPrimary {
background-color: #123456 !important;
}

</style>
Back to Top