Skarabee searchprofile Component

Getting started

Step 1: In the head section of your page, include the bootstrap library if you haven't already.

        
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">




Step 2: Include the javascript and css in the header of your website
   <script src="https://components.skarabee.net/searchprofile/v3/skarabee-searchprofile-component.js"> </script>
   <link rel="stylesheet" href="https://components.skarabee.net/searchprofile/v3/styles.css"/>
use latest if you want to subscribe to backwards compatible updates
   <script src="https://components.skarabee.net/searchprofile/latest/skarabee-searchprofile-component.js"> </script>
   <link rel="stylesheet" href="https://components.skarabee.net/searchprofile/latest/styles.css"/>
If you want to define a different primary color you can do this
    <style>
      skarabee-searchprofile-component {
            --primary: #215732 !important;
      }
  </style>
Step2: Add the skarabee-reservation-component tag on in your website where you want the component to render
    <skarabee-searchprofile-component style="padding-top: 1.5rem;display: block"
                                      country="BE"
                                      language="nl"
                                      id="skarabee-searchprofile"
                                      apikey="C9F1C5ED-BBC1-425E-B469-87470819C41D"></skarabee-searchprofile-component>

Input Parameters
api-key the api-key supplied by Skarabee. Required
regiontype

Cities (default), Zones

If zones is used all zones that are marked show on website from skarabee will be shown
estatecategory

Professional, Residential

Define this value if you only want the searchprofile component to have the residential OR professional option
transactiontype

Sale, Rent

Define if you only want the searchprofile component to work for sale OR rent
pricequickselect

true, false (default)

When set to true the price from-to will be replaced by a dropdown with some quickset choices
estategenres

true, false (default)

Set to true if you want the user to be able to select estate genre types
criteriastep

true (default), false

Set to false, if you wish to hide the step with the criteria from the form. Default is true.
estatesortfilter Adding a ; seperated string if you only want to include certain estatesorts as an option. eg 'Dwelling;Flat;Land'.
possible values for residential: Dwelling, Fdlat, Land, Other, ServiceFlat, Room, Parking
possible values for commercial: Catering, Office, Industry, Shop, ProfessionalOther, ProfessionalLand
recaptchasitekey A google recaptchakey. example: 6LebugoUAAAAAL0Qv_0AWKlfaIZKddVIxLkxGwr6<
recaptchaversion (optional) added support for reCAPTCHA v2 Invisible. set to 'v2_invisible'
addressrequired (optional, default false) set to 'true' if you want the address fields required
privacypolicyurl Adding a url to a privacy policy page will add a checkbox to the form that the user need to agree to
country required when using city selection Default BE
language the interface language (possible values: nl|fr|en) Default nl
origin (optional) origin of the request eg. "mywebsite"
recipients a ; separated list of email addresses that should receive a notification email/log entry. eg. info@myoffice.be


Demo

Click on the link below for a working component example. You can examine the code to see what is going on. A valid api key is required

Example

Advanced handling

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

Callback events
completed fires when the user completed the form and a request has been submitted to the server

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

Example event handling
<script>
    const component = document.getElementById("skarabee-searchprofile");
    component.addEventListener('completed', (event) => {
      console.log("completed returned by component", event);
      });
</script>