Gasten: Dit support center is voor hoteliers. Klik hier om contact met ons op te nemen.

Hoteleigenaren: Nieuw bij hoteliers.com? Klik hier voor productinformatie.

De Boekingsmodule op uw website plaatsen

In dit artikel geven wij u uitleg over het plaatsen van de boekingsmodule op uw eigen website. Wij adviseren om de boekingsmodule te laten plaatsen door uw websitebouwer.

Wanneer u ervoor heeft gekozen om de boekingsmodule te gebruiken, stuurt uw contactpersoon van hoteliers.com support u een bericht als de boekingsmodule gereed is om te implementeren. Vervolgens kunt u dit artikel doorsturen naar uw websitebouwer, die met onderstaande uitleg de boekingsmodule gemakkelijk in de website kan plaatsen.

Dit artikel bevat de volgende onderwerpen:

  1. Vereiste scripts en styles inladen
  2. Het standaard boekingsformulier
  3. Extra opties voor het boekingsformulier
  4. Een boekknop voor een specifiek kamertype of arrangement aanmaken
  5. Het JavaScript object aanmaken
  6. Stijl van de datepicker

1. Vereiste scripts en styles inladen
Wanneer u begint met het plaatsen van de boekingsmodule, kunt u op de link "WLP_VERSION_v3.x.x.zip" onderaan dit artikel klikken om het zip-bestand te downloaden. Deze zip bevat voorbeelden van alle onderstaande opties. Hiervoor kunt u het bestand "index" gebruiken.

NB Wanneer u een website heeft in WordPress, volg dan eerst het artikel Boekingsmodule inbouwen bij sites met WordPress


Plaats de bestanden op uw server en plaats onderstaande scripts tussen de <head></head> tags van de pagina.

NB Zorg ervoor dat de links in onderstaande scripts wijzen naar de juiste bestanden op uw server, dus dat 'src' of 'href' wijst naar de locatie van het bestand op uw 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. Het standaard boekingsformulier
Let op: als u alleen apart een kamer per boekknop op uw pagina wilt laten zien ga dan naar stap 4.

Nu moet de HTML in de pagina geplaatst worden. Dit kan op elke plek binnen de <body></body> tags geplaatst worden. De volgende code moet in elk geval worden geplaatst:

    <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>


Horizontaal boekingsformulier
Mocht u de horizontale variant van de kalender plaatsen, pas de <ul> regel dan aan:

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

Het nummer in “hoteliers-form__grid--3-fields” geeft het aantal list-items aan.


3. Extra opties van het boekingsformulier
Het formulier kan uitgebreid worden met een aantal functies, deze worden automatisch geactiveerd bij het toevoegen van bepaalde stukjes HTML.

Boekingsmodule in iframe in plaats van fancybox
Als u gebruik maakt van een inline iframe in plaats van een fancybox, voeg dan het volgende stukje HTML toe tussen de <body></body> tags.

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


Corporate Module
Als u gebruik wilt maken van een corporate codeveld, plaatst u de volgende HTML in list van het formulier.

<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
Als u gebruik wilt maken van een hotel dropdown menu, om te kiezen tussen twee of meer hotel ID's:

<li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_hotel">
    <label class="hoteliers-form__label" for="">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>



4. Een boekknop voor een specifiek kamertype of arrangement aanmaken

Mocht u een boekknop naar een specifiek kamertype of arrangement willen plaatsen, gebruik dan de volgende HTML per kamertype of arrangement.

<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" for="">Submit form</label>
                <button class="hoteliers-form__form-field hoteliers-form__btn">Book</button>
            </li>
        </ul>
    </form>
</div>

Bovenstaand is een voorbeeld van een boekknop die correspondeert met één kamertype. U kunt ook gebruik maken van een boekknop die correspondeert met één arrangement. Hiervoor dient u hf_room_id te vervangen naar hf_package_id.

De value moet bij hf_room_id aangepast worden naar het room ID van het kamertype. Bij hf_package_id dient dit aangepast te worden nar het package ID.

NB: Het room en packageID is te vinden in login.hoteliers.com > Hotel Data, in het linkermenu naast de kamernaam of arrangement).



5. Het JavaScript object aanmaken
Nu alle vereiste scripts, styles en HTML gereed is moeten deze onderdelen nog met elkaar verbonden worden. Dit gebeurt door middel van het hoteliers_object. Voeg het volgende stukje code toe tussen de <body></body> tags.

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


De correcte taal, hotel ID en het correcte thema instellen
Vervang de volgende parameters:

  1. Vervang HOTEL_ID met uw hotel ID.
  2. Vervang LANGUAGE met de taal van uw website.

    NB: Voor talen gebruiken we de landcodes van topdomeinen. We ondersteunen momenteel zes talen. Indien uw website in een taal is welke niet wordt ondersteund, gebruik dan wel die taal aangezien deze automatisch naar Engels wordt doorgeleid.

  3. Vervang OPTIONS met extra opties die u wilt gebruiken.

Voorbeeld
Een ingevuld voorbeeld met twee extra opties:

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


Extra opties
De extra opties die gebruikt kunnen worden zijn:

date_format: 'dd.mm.yy' Het formaat van de datum die verschijnt in het textveld
default_days: 1 Minimaal aantal nachten dat een gast moet verblijven
frame_width: '100%' Breedte van de fancybox. 100% is optimaal
frame_height: '100%' Hoogte van de fancybox. 100% is optimaal
use_inline_iframe: false Als deze op true staat opent er een inline iframe (Let op: hiervoor moet extra HTML worden toegevoegd, zie stap 3)
packages: false Als deze op true staat zullen er alleen arrangementen getoond worden
rooms: false Als deze op true staat zullen er alleen kamers getoond worden
enable_onSiteOverlay: false Als deze op true wordt gezet, activeert dit de Booking Engine ReminderLet op: dit dient ook in het hoteliers.com extranet op actief te staan

 

6. Stijl van de datepicker
De stijl van de datepicker kan worden veranderd door de stijl aan te passen in de hoteliers-theme.css. In de comments binnen de CSS is aangegeven wat er precies aangepast kan worden.

NB: Klik op onderstaande link om de benodigde files te downloaden.

Mocht u een suggestie of vraag over dit artikel hebben, dan kunt u hieronder een reactie plaatsen. Mocht u een bug, klacht of een vraag hebben die specifiek voor u geldt, dan raden we u aan om ons een verzoek te sturen via "Een aanvraag indienen" bovenaan deze pagina.
Hebt u meer vragen? Een aanvraag indienen

Opmerkingen