Booking Engine
The current version of the booking engine is intended to open in a new window. The main reason being that many payment service providers do not allow payments to be executed within a nested iframe.
If you don't use any external payment service providers you can use the new booking engine in an iframe at your own risk. In this case we recommend setting a fixed height for the iframe no greater than 100vh.
The booking button will open the booking enginge in a new window - the button will automatically adjust it's width to the one of it's parent container. The colors and border radius can be customized to fit the web sites look and feel.
Name | Description | Default Value |
|---|---|---|
hotel | (required) the hotel ID as displayed in the hotel software online booking settings | |
label | (recommended) the label displayed on the button | "Online-Buchung" |
room-type | (optional) if room type id is supplied, the room type will be highlighted in the search results (if available) | |
rate-plan | (optional) if rate plan id is supplied, the rate plan will be highlighted in the search results (if available) | |
arrival-date | (optional) date format must be one of YYYY-MM-DD or YYYYMMDD | |
departure-date | (optional) date format must be one of YYYY-MM-DD or YYYYMMDD | |
num-adults | (optional) | |
room-count | (optional) | |
lang | (optional) if not supplied, will try to auto determine the users language | |
env | (optional) | "production" |
border-radius | (optional) | 0em |
button-text-color | (optional) | #000 |
button-color | (optional) | #fff |
button-border-color | (optional) | #000 |
button-border-width | (optional) | 0.2em |
button-hover-color | (optional) | #000 |
button-hover-border-color | (optional) | #000 |
button-hover-text-color | (optional) | #fff |
source | a custom source name can be suppli to attribute the booking to a certain campaign (optional) | |
Default values of the design or subject to change in future versions, without prior notice, if we deem other values to align better with modern website designs.
We do recommend the custom implementation for more experienced developers who prefer to have full control over the look and feel of the link.
Dynamic Link Generation
We are dynamically generating links, so you are always using the latest features and the latest version of the online booking. We do not recommend hard-coding those generated links, because they can stop working without prior notice.
Hotelsoftware.Booking.getLink does return a link which is valid with your configuration options provided.
Avoid using window.open
We only used window.open in the example above, to showcase how the link generation works. As window.open is often blocked by ad blockers, please set the generated link on the href attribute of the respective a tag, whenever possible to avoid problems with ad blockers.
Warranty
We are happy to help your web developer in case he needs any further information. Unfortunately, we can not do the website integrations for you. We usually only see the page that got rendered for the end user, but we don't know about all the things going on behind the scenes. Working ourselves into all the implementation details of your website can take many hours, and there is still a high risk of missing out on some less obvious things. In case you or your web designer are using a page builder and do not know how to adjust the code to your requirements, we can refer you to partner agencies which do offer professional web development services. And no, we can not make an exception for you. We have to provide warranty for whatever we do, and we can only provide warranty for systems which are entirely within our control.
Name | Description |
|---|---|
arrivalDate | arrival date in format YYYY-MM-DD or YYYYMMDD |
departureDate | departure date in format YYYY-MM-DD or YYYYMMDD |
env | Environment (one of 'dev', 'test', 'demo' or 'prod') - default: 'prod' |
lang | ISO language code - if the language is not supported the online booking will default to 'de' |
roomTypeId | if a valid roomTypeId is passed, this room type will be the first one to be displayed in the room type list (if available) |
ratePlanId | if a valid ratePlanId is passed, this rate plan will be the first one to be displayed in the rate plan list (if available) |
source | a custom source name can be supplied to attribute the booking to a certain campaign |
|
|
|
|
The following JSFiddle shows a sample code implementing a button to open the booking engine in a new window.
Warranty
The sample code above is provide as a sample implementation only with no warranty whatsoever. It's just a sample showing how a button for the booking engine could be added to an existing website. It may not work with older browser or cause interferrence with other parts of your existing website. If you decide to copy it, please make sure to adjust it to your specific requirements.
As mentioned above, we strongly advise, not to hardcode the URLs as any future version upgrade might break your implementation, without prior notice. However, should you still decide to move forward in this direction, we provide some basic guidance on how to generate the link. Please be aware that this is not supported, and therefore we can't provide any assistance should you run into issues.
Query Param Name | Description |
|---|---|
arrivalDate | arrival date in format YYYY-MM-DD or YYYYMMDD |
departureDate | departure date in format YYYY-MM-DD or YYYYMMDD |
roomTypeId | if a valid roomTypeId is passed, this room type will be the first one to be displayed in the room type list (if available) |
ratePlanId | if a valid ratePlanId is passed, this rate plan will be the first one to be displayed in the rate plan list (if available) |
discountCode | if this field is used, the discount code will be pre-populated this can be useful if the online booking link is placed in an email, and you would like to give a discount to everyone using this specific link |
lang | ISO language code - if the language is not supported, the online booking will default to the primary language requested by the users browser |
numAdults | preselects a certain number of adults (usage of this param is discouraged) if the number provided is higher than the maximum occupancy of the largest available room, the online booking will not return any results |
source | can be used to manually pass a certain source (instead of the default online booking labelling) this can be useful if the online booking link is placed in an email, and you would like to attribute the bookings to the email campaign - if the guest did accept cookies, the source name is stored in the cookies for 30 days |
