Skarabee Searchprofile component - V4

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/v4/skarabee-searchprofile-component.js"> </script>
       <link rel="stylesheet" href="https://components.skarabee.net/searchprofile/v4/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
country required when using city selection Default BE
language the interface language (possible values: nl|fr|en) Default nl
regiontype

Cities (default), Zones, Map

If zones is used all zones that are marked show on website from skarabee will be shown. For Map see section map usage
mapoptions

The mapoptions are applicable if the regiontype is set to 'Map' need to be passed in as a single line json compliant string. eg:

mapoptions="{'zoom':11,'fullscreen':true,'coordinates':{'latitude':51.0950,'longitude':4.4478},'colors':{'normal':{'fillcolor':'#F5F5F5','bordercolor':'#E8E8E8'},'selected':{'fillcolor':'#72a782','bordercolor':'#E8E8E8'}}}"
  • zoom determine the startup viewlevel of the map
  • fullscreen allow the fullscreen toggle
  • coordinates > latitude/longitude determines the center position of the map
  • colors allow you to set the border & fill color for both the normal map state and the selected state
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
budgetrequired
true, false (default)
set to 'true' if you want the budget required
budgetoptions
budgetoptions="{'minSale': 300000,'maxSale':500000,'saleStep':50000,'minRent':250,'maxRent':1500,'rentStep':250}"
optional. if defined this setting will populate the values steps and min and max for the pricequickselect
genderrequired
true, false (default) - optional
set to 'true' if you want the contactgender field required. (versions prior to V4 always had a gender required)
locationrequired
true, false (default) - optional
set to 'true' if you want the location preferencerequired.
hideregionstep
true , false (default) - optional
Set to true, if you wish to hide the step with the region selection the form. Default is false.
hidepricestep
true , false (default) - optional
Set to true, if you wish to hide the step with the price / budget from the form. Default is false.
hidecriteriastep
true , false (default) - optional
Set to true, if you wish to hide the step with the criteria from the form. Default is false.

Additional parameters can control if you want to hide any of the extra criteria.
true , false (default) - optional

  • hidebedrooms
  • hidefurnished
  • hidegarden
  • hideterrace
  • hidegarage
  • hideparking
  • hideinvestment
  • hidenewestate
  • hideelevator
estategenres
true, false (default) - optional
Set to true if you want the user to be able to select estate genre subtypes
allowmultipletypes
true, false (default) - optional
Set to true if you want the user to be able to select multiple genre types. Note: each selected type will generate a match profile in skarabee
estatesortfilter Adding a ; seperated string if you only want to filter and show only certain estatesorts as an option. eg 'Dwelling;Flat;Land'. It is recommend to limit the selection if you also have allowmultipletypes set to true.
possible values for residential: Dwelling, Flat, Land, Other, ServiceFlat, Room, Parking
possible values for commercial: Catering, Office, Industry, Shop, ProfessionalOther, ProfessionalLand
estategenrefilter Adding a ; seperated list with genres if you only want to show only certain estate genres as an option. eg 'Bungalow;Castle;GroundfloorFlat'. Tip: if you set parameter debug=true (for testing purposes) you will see a complete list of genres outputted to the console.
addressrequired
true, false (default) - optional
set to 'true' if you want the address for the contact details required
hideaddressfields
true, false (default) - optional
set to 'true' if you want the hide the address fields for the contact details
energyclassfields
true, false (default) - optional
set to 'true' if you want to add the EPC fields to the form
privacypolicyurl Adding a url to a privacy policy page will add a checkbox to the form that the user need to agree to
origin origin of the request eg. "mywebsite" - optional
recipients a ; separated list of email addresses that should receive a notification email/log entry. eg. info@myoffice.be
recaptchasitekey A google recaptchakey. example: 6LebugoUAAAAAL0Qv_0AWKlfaIZKddVIxLkxGwr6<
recaptchaversion (optional) added support for reCAPTCHA v2 Invisible. set to 'v2_invisible'
translations A whole range of custom translations can optionally be passed in
Parameter name
translation_steptitle_transactionThe title on the step with the the choice between Sale or Rent
translation_steptitle_estatetype_saleThe title shown on the step with the estate typology if the user chose Sale
translation_steptitle_estatetype_rentThe title shown on the step with the estate typology if the user chose Rent
translation_steptitle_location_saleThe title shown on the step with the location selection if the user chose Sale
translation_steptitle_location_rentThe title shown on the step with the location selection if the user chose Rent
translation_steptitle_budgetThe tittle shown on the step with the price criteria
translation_steptitle_criteriaThe title shown on the step with the criteria
translation_steptitle_userdetailsThe title shown on the last step with the user details
translation_completed_titleThe title shown when the user submits the request
translation_completed_messageThe text that is shown when the suer submits the request


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>