Hotel Guests: This support center is created for hotel owners. Click here to contact us.

Hotel owners: New to hoteliers.com? Click here to find the best solution for your hotel.

Placing the Booking Engine on your website

In this article we give you the explanation for placing the booking engine on your own website. We advise you to ask your webmaster to implement the booking engine. For more information about the booking engine you can click here.

When you have chosen to use the booking engine, your contact person of hoteliers.com support will send you a message when your booking engine is created and ready to implement. At this point, you can send this article to your webmaster, who will place the booking engine with help of this article on your website.

This article consists of the following topics:

  1. Loading required scripts and styles
  2. The standard booking form
  3. Extra options for the booking form
  4. Create a book button for a specific room type of package
  5. Creating the JavaScript object
  6. Style of the datepicker

1. Loading required scripts and styles
When you start with the implementation of the booking engine, you can click on the link "WLP_VERSION_v3.x.x.zip" at the bottom of this article to download the zip-file. In this zip file you find examples of all options of the booking engine. You can find these examples in the "index" file.

Note: if your website is build with WordpRess, please read first the article how to add the booking engine in a wordpress website


Put the following between the <head></head> tags of the page. Make sure that the links in the scripts below refer to the correct files on your server, so the 'src' or 'href' refer to the correct file placed on your server.

<link rel="stylesheet" type="text/css" href="assets/css/hoteliers-main.css">
<link rel="stylesheet" type="text/css" href="assets/css/hoteliers-theme.css">

<script type="text/javascript" src="assets/js/hoteliers-main.js"></script>

 

2. The standard booking form

The next step is to place the HTML into the page. You can do this at any position within the <body></body> tags. The following code needs to be placed:

<div class="hoteliers-form">
    <form class="hoteliers-form__form">
        <ul class="hoteliers-form__list">
            <li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_arrival">
                <label class="hoteliers-form__label">Aankomst</label>
                <div class="hoteliers-form__form-field-container">
                    <input class="hoteliers-form__form-field" type="text">
                    <svg class="hoteliers-form__icon hoteliers-form__icon--no-event" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
                        <path fill="#000" d="M28 4h-3v1c0 1.1-0.9 2-2 2s-2-0.9-2-2v-1h-10v1c0 1.1-0.9 2-2 2s-2-0.9-2-2v-1h-3c-1.1 0-2 0.9-2 2v22c0 1.1 0.9 2 2 2h24c1.1 0 2-0.9 2-2v-22c0-1.1-0.9-2-2-2zM28 28c0 0 0 0 0 0h-24c0 0 0 0 0 0v-18h24v18zM9 6c0.6 0 1-0.4 1-1v-4c0-0.6-0.4-1-1-1s-1 0.4-1 1v4c0 0.6 0.4 1 1 1zM23 6c0.6 0 1-0.4 1-1v-4c0-0.6-0.4-1-1-1s-1 0.4-1 1v4c0 0.6 0.4 1 1 1zM18 12h-10v2h8v4h-8v2h8v4h-8v2h10zM22 26h2v-14h-4v2h2zM27.3 30.8h-22.5c-1.1 0-2-0.6-2-1.7v1c0 1.1 0.9 2 2 2h22.5c1.1 0 2-0.9 2-2v-1c0 1.1-0.9 1.8-2 1.8z"></path>
                    </svg>
                </div>
            </li>
            <li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_departure">
                <label class="hoteliers-form__label">Vertrek</label>
                <div class="hoteliers-form__form-field-container">
                    <input class="hoteliers-form__form-field" type="text">
                    <svg class="hoteliers-form__icon hoteliers-form__icon--no-event" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
                        <path fill="#000" d="M28 4h-3v1c0 1.1-0.9 2-2 2s-2-0.9-2-2v-1h-10v1c0 1.1-0.9 2-2 2s-2-0.9-2-2v-1h-3c-1.1 0-2 0.9-2 2v22c0 1.1 0.9 2 2 2h24c1.1 0 2-0.9 2-2v-22c0-1.1-0.9-2-2-2zM28 28c0 0 0 0 0 0h-24c0 0 0 0 0 0v-18h24v18zM9 6c0.6 0 1-0.4 1-1v-4c0-0.6-0.4-1-1-1s-1 0.4-1 1v4c0 0.6 0.4 1 1 1zM23 6c0.6 0 1-0.4 1-1v-4c0-0.6-0.4-1-1-1s-1 0.4-1 1v4c0 0.6 0.4 1 1 1zM18 12h-10v2h8v4h-8v2h8v4h-8v2h10zM22 26h2v-14h-4v2h2zM27.3 30.8h-22.5c-1.1 0-2-0.6-2-1.7v1c0 1.1 0.9 2 2 2h22.5c1.1 0 2-0.9 2-2v-1c0 1.1-0.9 1.8-2 1.8z"></path>
                    </svg>
                </div>
            </li>
            </li>
            <li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_submit">
                <label class="hoteliers-form__label hoteliers-form__label--hidden" >Submit form</label>
                <button class="hoteliers-form__form-field hoteliers-form__btn">Book</button>
            </li>
        </ul>
   
</form>
</div>


Horizontal booking form
If you want to use the horizontal version of the booking form, all you need to do is to adjust the <ul> tag:

<ul class="hoteliers-form__list hoteliers-form__grid hoteliers-form__grid--3-fields">

The number in "hoteliers-form__grid--3-fields" displays the number of list-items.


3. Extra options for the booking form
The form can be upgraded with a few functions, which will be automatically activated when certain HTML strings are added.


Booking engine in iframe instead of fancybox
If you use an inline iframe instead of a fancybox, you can add the following HTML between the <body></body> tags.

<div id="iframe_container"></div>


Corporate Module
If you wish to use the corporate code field, use the following HTML in the form.

<li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_code">
    <label class="hoteliers-form__label">Code</label>
    <div class="hoteliers-form__form-field-container hoteliers-form__form-field-container--code">
        <input class="hoteliers-form__form-field" type="text">
    </div>
</li>

Hotel dropdown
If you wish to use a hotel dropdown for multiple hotel ID’s:
<li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_hotel">
    <label class="hoteliers-form__label">Hotel</label>
    <div class="hoteliers-form__form-field-container hoteliers-form__form-field-container--hotel">
        <!-- Select hotel !-->
       
<select class="hoteliers-form__form-field name="hf_hotel_hotelid" id="hf_hotel_hotelid">
        <option value="8">preview hotel 1</option>
        <option value="2270">preview hotel 2</option>
        </select>
        <svg class="hoteliers-form__icon hoteliers-form__icon--no-event hoteliers-form__icon--select" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
            <path d="M32 2.1L16 29.9 0 2.1h32z"></path>
        </svg>
    </div>
</li>


Field for rooms/packages
If you wish to use a drop-down where guests can choose between rooms or packages:

    <!-- START SELECT ENGINE !-->
    <div class="hf_engine_select">
        <select name="hf_engine" id="hf_engine">
            <option value="rooms">Rooms</option>
            <option value="packages">Packages</option>
        </select>
    </div>
    <!-- END SELECT ENGINE !-->

There is no standard location for above mentioned code, as long it is placed in the <div class="zapp"> of the standard booking form.


4. Create a book button for a specific room type
If you want to use a book button for a specific room type or package, you can use the following HTML per room type or package

<div class="hoteliers-form">
    <form class="hoteliers-form__form">
        <input type="hidden" class="hf_room_id" value="21948" />
        <ul class="hoteliers-form__list hoteliers-form__grid hoteliers-form__grid--4-fields">
            <li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_arrival">
                <input type="hidden" data-item="hoteliers_arrival" value="" />
            </li>
            <li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_departure">
                <input type="hidden" data-item="hoteliers_departure" value="" />
            </li>
            <li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_submit">
                <label class="hoteliers-form__label hoteliers-form__label--hidden">Submit form</label>
                <button class="hoteliers-form__form-field hoteliers-form__btn">Book</button>
            </li>
        </ul>
    </form>
</div>

The above mentioned code is an example of a book button which connects with a single room type. You can also use this for a single package. Just replace the hf_room_id to hf_package_id and use the correct packageID.

The value needs to be replaced at the hf_room_id to the room/packageID of the room type/package. 

Note: you can find the roomID in login.hoteliers.comHotel Data, in the left menu next to the room/package.



5. Creating the JavaScript object
At this step, all of the required scripts, styles and HTML are implemented. The next step is that all of these parts need to be connected. This will be done by the hoteliers_object. Add the following code between the <body></body> tags.

<script type="text/javascript">
    jQuery(document).ready(function(){
        hoteliers_object = new hoteliers_form("HOTEL_ID", "LANGUAGE", {OPTIONS});
    });
</script>


Setting the correct language, hotel ID and theme
Replace the parameters:

  1. Replace LANGUAGE with the language of your website

    Note: For languages, we use country codes of TLD's. We currently support six languages. If your website is in a language that is not supported, please do use the language tag of this language, as it will automatically redirect to English.

  2. Replace HOTEL_ID with your hotel ID
  3. Replace OPTIONS with the extra options you want to use

Example
A complete example with two extra options:

<script type="text/javascript">
    jQuery(document).ready(function(){
        hoteliers_object = new hoteliers_form("2270", "en", {use_inline_iframe: true, frame_height: 1000});
    });
</script>


Extra options
Extra options that can be used:

date_format: 'dd.mm.yy' The format of the date that shows in the text field
default_days: 1 Minimum nights of stay that a guest needs to stay
frame_width: '100%' Width of the fancybox. Please note: 100% is optimal
frame_height: '100%' Height of the fancybox. 100% is optimal
use_inline_iframe: false If this is set on true the booking engine will open in an inline iframe (please note: for this option an extra HTML element needs to be placed, see step 3)
packages: false If this is set on true only packages will be shown
rooms: false If set on true only rooms will be shown
enable_onSiteOverlay: false If this is set to true the Booking Engine Reminder will be shown upon closing the Booking Engine.
Please note: the Booking Engine Reminder has to be enabled also in the Hoteliers Extranet

 

6. Style of datepicker
The style of the datepicker can be changed by changing the style in the hoteliers-theme.css. In the comments within the CSS you can see what can be changed.

 

 

 

Below, you can place a comment, in case you have a suggestion or question about this article. If case you have a bug, complaint or question concerning your account, we recommend to use "Submit a request" at the top of this page.
Have more questions? Submit a request

Comments