Versions Compared

Old Version 5

changes.mady.by.user Wouter van Gessel

Saved on

compared with

New Version Current

changes.mady.by.user Dmitri Chebotarev

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The Chain Engine is one of the many products of Hoteliers.com. This article covers the implementation of this product into hotel websites.

...

Note

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

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

Code Block
languagehtml
<form method="postget" 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 arevisible after implementation.

Info

View a demo in Codepen.

 

Extra options

...

  • Promotion codes

  • Specific room or package button

Continue to Extra options

...

.