Simpel implementation

Simpel hotel implementation, make 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.

...

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>

Optional styling for the button

<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 arevisible after implementation.

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

...