Voor het integreren van het online boeken door uw hele website heen, kunt u ook de losse widgets gebruiken.
Zet onderstaande HTML-code op de plaats waar u de widget(s) wilt weergeven:
<div class="booking-widget" data-booking-lng="" data-booking-resort="" data-booking-token="">
<!-- Hier komen de afzonderlijke widgets -->
</div>
In plaats van een nieuwe div zou dit bijvoorbeeld ook op de <body> of een reeds bestaande <div> tag toegevoegd kunnen worden, dit ligt aan de wensen van de betreffende pagina.
Extra attributen om direct mee te geven, indien gewenst of na deeplink:
- data-booking-arrival=""
- data-booking-duration=""
- data-booking-level=""
Om de ‘booking-widget’ te initialiseren is een extra script regel nodig, namelijk:
<script src="https://lib.hmcms.nl/js/2/ha/booking/hmapi.js"></script>
De initialisatie van de ‘booking-widget’ wordt niet automatisch uitgevoerd, dit kan op de volgende manier, of direct in de pagina, of in een los ‘javascript’ bestand, als volgt uitgevoerd worden:
<script>hmapi.booking.init();</script>
Deze functie kan een ‘callback’ functie meekrijgen, in deze functie is het mogelijk om de verschillende acties van de widgets aan te passen en/of uit te breiden. Bijvoorbeeld:
<script>
hmapi.booking.init().then(function(widget){
var $ = jQuery,
lng = document.documentElement.lang || 'nl';
// Hier komen de mogelijke uitbreidingen
});
</script>