Skarabee contact component


The contact component allows a developer to integrate a contact form on his webpage. If an estate identifier is supplied this will be handled as a "more info" request. Otherwise a normal contact me is assumed. These will be processed instantly by skarabee

Getting started

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

<link rel="stylesheet" href="" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
Step 2: Include the javascript and css in the header of your website
<script src=""></script>
<link rel="stylesheet" href=""/>
If you want to define a different primary color you can do this
      skarabee-contact-component {
    --primary: #215732 !important;
Step2: Add the skarabee-contact-component tag on in your website where you want the component to render

Input Parameters
apikey the api-key supplied by Skarabee. Required
estateid (optional) * If you want this contact me linked to a property or publication. The skarabee estateid identifier
dspublicationguid (optional) * If you want this contact me linked to a property or publication. The ds publication guid
recaptchasitekey (optional) A google recaptchakey. example: 6LebugoUAAAAAL0Qv_0AWKlfaIZKddVIxLkxGwr6<
recaptchaversion (optional) added support for reCAPTCHA v2 Invisible. set to 'v2_invisible'
includebootstrap determines if the component should include bootstrap css or not
privacypolicyurl (optional) Adding a url to a privacy policy page will add a checkbox to the form that the user need to agree to
title supply a title if you want to override the default title of the component
subtitle supply a subtitle if you want to add an extra subtitle underneath the title
country required when using city selection Default BE
language the interface language (possible values: nl|fr|en) Default nl
origin add a free text (eg. SchattingsVerslag,, ...) to identify the origin of this component. (default COMPONENT)
addressrequired (optional) boolean, default false
genderrequired (optional) boolean, default false
recipients optional a ; separated list of email addresses that should receive a notification email/log entry. eg.


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


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

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