Placing the Hoteliers.com preferred banner on your website

With the preferred hotel banner you benefit of better search results on the Direct Booking Portal Hoteliers.com for commission free bookings.

What is the preferred hotel program?

With the preferred hotel program you benefit of higher rankings in the search results of Hoteliers.com! By placing one of the below stated banners you will become a preffered hotel on the marketing platform and benefit from better search results on Hoteliers.com and organic search. With placing the banner on your website, we both benefit from better search results in the Google search engine.

Becoming a preferred hotel is completely free! Adding the preferred hotel banner to your website will help raising the find ability of the Hoteliers.com commission free booking platform in the search engines. Better find ability will raise the chance of more commission free bookings for your hotel. The only condition in becoming a preferred hotel is an average review score of 7 out of 10.

Recommended banners

We recommend to use the following two banners.

Banner 1 "normal"

Banner 2 "negative"

Alternative banners

If the above two banners are not in line with your website design, you can also choose one of the following alternative banners.

Banner 3 "monochrome-negative" used on dark background

Banner 4 "no-border-negative" used on dark background

Banner 5 "monochrome" used on light background

Banner 6 "no-border" used on light background

Instructions

The placement of the banners is the same for all themes.
Just place this code at the beginning or end of the page:

<script type="text/javascript" src="https://www.hoteliers.com/preferred/preferred.js"></script>;
<script type="text/javascript">
 htlrs.initialize({
 lang : '{language}',
 hotel : '{hotelID}',
 theme : '{theme}',
 position : '{position}'
 })
</script>
<div id="htlrs_preferred" style="width:186px;"></div>

Required options
Replace {language} with the language of the site.
If you have a multi-language make sure this value changes according to the selected language.

Tip: Replace {hotelID} with your Hoteliers ID. You can find your Hoteliers ID in dashboard.hoteliers.com > Content management > Hotel Main info (in the left menu bar)

Replace {theme} with one of the following themes available

1. normal
2. negative
3. monochrome-negative
4. no-border-negative
5. monochrome
6. no-border

Optional
Replace {position} with the html element (right, left or center) you want the banner to be shown.
If you leave this blank a default html-element will be created for you with the name 'htlrs_preferred', which you can style yourself.

Example

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://www.hoteliers.com/preferred/preferred.js"></script>;
        <script type="text/javascript">
            htlrs.initialize({
                lang  : 'nl',
                hotel : '8',
                theme : 'normal'
            });
        </script>

    </head>

    <body>

        <div id="htlrs_preferred" style="width:186px;">

        </div>

    </body>
</html>