Skarabee Visit Reservation Component

Getting started

Step 1: Include the javascript and css in the header of your website
<script src="http://components.skarabee.net/reservation/latest/skarabee-visitreservation-component.js"></script>
<link rel="stylesheet" href="http://components.skarabee.net/reservation/latest/styles.css"/>
Step2: Add the skarabee-reservation-component tag on in your website where you want the component to render
<skarabee-reservation-component
  id="demo"
  api-key="9999-9999-9999-9999"
  guid="F2B88855-15F1-414A-B778-176ACD6D21C5"
  privacypolicyurl="https://www.w3schools.com/default.asp"
  language="nl"
  recaptchasitekey="XXXX"></skarabee-reservation-component>

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
recaptchaversion optional added support for reCAPTCHA v2 Invisible. set to 'v2_invisible'
addressrequired (optional) optional set to 'true' if you want the address fields required

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 
<script>
  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"
    }
  });

</script>


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