Skarabee contact component

Purpose

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="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/skarabee-contact/latest/skarabee-contact-component.js"></script>
<link rel="stylesheet" href="https://components.skarabee.net/skarabee-contact/latest/styles.css"/>
If you want to define a different primary color you can do this
    <style>
      skarabee-contact-component {
    --primary: #215732 !important;
      }
  </style>
Step2: Add the skarabee-contact-component tag on in your website where you want the component to render
  <skarabee-contact-component
          id="skarabee-contact"
          apikey="C9F1C5ED-BBC1-425E-999-87470819C41D"
          language="nl"
          country="BE">
  </skarabee-contact-component>

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, mywebsite.be, ...) 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. 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

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