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
recipients optional a ; separated list of email addresses that should receive a notification email/log entry. eg. info@myoffice.be
booked_text optional, string control the text that is show when all visit moments are booked
booked_buttonlink, booked_buttontext optional, string Adds a possibility to show an extra linkbutton with an url when all visit moments have been booked
genderrequired optional, boolean default false Determines if the gender field is required in the form
hidegender optional, boolean, default false Determines if the gender field is hidden in the form
translations A whole range of custom translations can optionally be passed in
Parameter name
translation_completed_messageMessage shown when a user has booked a timeslot
translation_double_booking_detectedSoft warning shown when a cookie is detected where the same user has already booked a timeslot

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