Booking Engine Button and links to the Booking Engines
The Booking Engine is one of the many products of Hoteliers.com. This article covers the implementation of this product into hotel websites.
The script
The following script covers the basic implementation for the Booking Engine button. Copy-pasting this script into your hotel website will place an orange Booking Engine button.
Make sure to replace {hotel} with your hotel ID and {language} with the correct language code.
The CSS, the code between the <style> tags, is optional.
<form method="get" action="https://scripts.hoteliers.com/api/v1/book-form" target="_blank" class="hoteliers-book-form">
<input type="hidden" name="hotel" value="{hotel}">
<input type="hidden" name="lang" value="{language}">
<button type="submit" class="hoteliers-book-form__button">Book now</button>
</form>
<style>
.hoteliers-book-form {}
.hoteliers-book-form__button {
padding: 1rem 6rem;
background: orange;
border: 0;
border-radius: 3px;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
cursor: pointer;
font: inherit;
}
.hoteliers-book-form__button:hover {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
}
.hoteliers-book-form__button:active,
.hoteliers-book-form__button:focus {
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.3);
outline: 0;
}
</style>Placing this script on your website, is all you have to do to implement the Booking Engine on your website. Ensure checking if the correct hotel and the correct languages are visible after implementation.
View a demo in Codepen.
Linking to the Booking Engine
It’s also possible to create a link to the booking engine. An example of a valid link is
https://scripts.hoteliers.com/api/v1/book-form/?lang={language}&hotel={hotel}&arrival={yyyy-mm-dd}&departure={yyyy-mm-dd}
Extra options
There are also more advanced options available:
Promotion codes
Specific room or package button
Date picker
Number of nights
Google Analytics
Multiple hotels
Continue to Extra options.