The Chain 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 Chain Engine button. Copy-pasting this script into your hotel chain’s website will place an orange Chain Engine button.

Make sure to replace {chain} with your chain ID and {language} with the correct language code.

The CSS, the code between the <style> tags, is optional.

<form method="post" action="https://scripts.hoteliers.com/api/v1/book-form" target="_blank" class="hoteliers-book-form">
    <input type="hidden" name="chain" value="{chain}">
    <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 Chain Engine on your website. Ensure checking if the correct hotel chain and the correct languages are visible after implementation.

View a demo in Codepen.

Extra options

There are also more advanced options available:

Date picker
Google Analytics
Hotel selector

The following options are not available for chain hotels:

Promotion codes
Specific room or package button

Continue to …

Options

Options can be inserted in the form like

<form method="post" action="https://scripts.hoteliers.com/api/v1/book-form" target="_blank" class="hoteliers-book-form">
    <input type="hidden" name="chain" value="{chain}">
    
    <!-- INSERT OPTIONS HERE -->
    
    <button type="submit" class="hoteliers-book-form__button">Book now</button>
</form>

Language

Please see Language section for hotels.

Arrival and departure

Please see Arrival and departure section for hotels.

Google Analytics variables

Please see Google Analytics variables section for hotels.

Advanced usage

Hotel selector using HTML only

By default if you pass both an hotel and chain. The hotel will be prioritized.

You can use this to make a hotel selector like here: DEMO

<form method="post" action="https://scripts.hoteliers.com/api/v1/book-form" target="_blank" class="hoteliers-book-form">
    <!-- Put chain hotel here -->
    <input type="hidden" name="chain" value="36">
    
    <!-- Add select with hotels -->
    <select name="hotel">
      <option value="">All Hotels</option>
      <option value="8">Demo hotel 1</option>
      <option value="2270">Demo hotel 2</option>
    </select>
    
    <button type="submit" class="hoteliers-book-form__button">Book now</button>
</form>

Chain Engine Button