Skarabee Visit Reservation Component

Getting started

Step 1: Include the javascript and css in the header of your website
<script src=""></script>
<link rel="stylesheet" href=""/>
Step2: Add the skarabee-reservation-component tag on in your website where you want the component to render

Input Parameters
api-key required the api-key supplied by Skarabee
guid required the guid of the publication for the estate you want to visit
privacypolicyurl optional if you want the user to agree to a terms of service, enter the absolute url here
language optional, default nl the interface language (possible values: nl|fr|en)
bootstrap optional, default true if your website already includes bootstrap css set this to false
recaptchasitekey optional if you want to protect the form with a recaptha. Supply the key provided for your website domain

Inline Example

Advanced handling

It is possible to handle native javascript events from the skarabee-reservation-component.

Callback events
initialised fires after initialisation. when event.detail.success equals true reservations are possible for this estate
completed fires when the user completed the form and a reservation has been made

Input Events
updateComponent component.updateComponent(); can be used to trigger an update on the webcomponent

Example event handling
  const demo = document.getElementById("demo");

  demo.addEventListener('completed', (event) => {
  // handle the reservation completed event any way you want
    $('#exampleModal').modal('toggle'); //close the modal

  demo.addEventListener('initialised', (event) => {
    if(event.detail.success) {
      $("#reservation-button").show(); // eg. "make reservation button when reservation is possible"


Modal popup demo with bootstrap

In the following example the component is integrated within a boostrap modal dialog component.
The register button will only be visible when a reservation is possible for this estate.
The modal is closed after the registration is completed.

Bootstrap example