Contact Widget

Integrate a beautiful contact form widget into your website with just a few lines of code.

Integration Guide

Table of Contents

Quick Start

Add the contact widget to your page in 3 simple steps:

Step 1: Include Required Files

<!-- Bootstrap CSS (optional - provides a good base for styling, required when using our pre-built themes) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous">

<!-- Widget CSS (required) -->
<link href="https://elements.realsuite.be/contact-widget/beta/realsuite-contact-widget.css" rel="stylesheet">

<!-- Widget Script (place before closing </body>) -->
<script src="https://elements.realsuite.be/contact-widget/beta/realsuite-contact-widget.js"></script>

Step 2: Add the Widget Element

<!-- Basic usage (general contact form) -->
<realsuite-contact-widget
    apikey="YOUR_API_KEY">
</realsuite-contact-widget>

<!-- If you want to link the request to a specific estate/publication -->
<realsuite-contact-widget
    apikey="YOUR_API_KEY"
    guid="YOUR_PUBLICATION_GUID">
</realsuite-contact-widget>

Step 3: (Optional) Customize the Theme

<style>
  :root {
    --rs-primary: #72A98F;  /* Your brand color */
  }
</style>
Tip: The GUID is optional! Without a GUID, the contact form works as a general inquiry form. With a GUID, the contact request is linked to a specific estate.

Prerequisites

Dependencies

Dependency Version Required Purpose
Bootstrap CSS 5.3.x Optional Provides a good base for styling (forms, buttons, layout). Required when using our pre-built themes.
Note: Bootstrap CSS is optional but highly recommended as it provides a solid foundation for styling. If you plan to use any of our pre-built themes, Bootstrap CSS is required. If you're already using Bootstrap on your site, you don't need to include it again.

Widget Attributes

Configure the widget using HTML attributes on the <realsuite-contact-widget> element:

Attribute Type Required Description
apikey string Required Your RealSuite API key for authentication. Contact your RealSuite representative to obtain this.
guid string Optional The unique identifier (GUID) of the estate/property. If provided, the contact request will be linked to this estate.
languageid string Optional Language code for translations. Default: "nl-be". Supported: "nl-be", "fr-be", "en"
translationsuri string Optional URL to a JSON file containing custom translation overrides (see Translations)

Example with All Attributes

<realsuite-contact-widget
    apikey="your-api-key-here"
    guid="43aaef38-816b-43ed-83c6-35d027a1c325"
    languageid="nl-be"
    translationsuri="/my-translations.json">
</realsuite-contact-widget>

Theming & Customization

The widget uses CSS custom properties (variables) for easy theming. Simply override the variables in your CSS to match your brand.

Quick Brand Color Override

The fastest way to customize the widget is to override the primary color:

<style>
  :root {
    --rs-primary: #e13d3f;  /* Your brand color */

    /* Auto-generated variants (optional - will be calculated if not set) */
    --rs-primary-dark: color-mix(in srgb, var(--rs-primary) 80%, black);
    --rs-primary-light: color-mix(in srgb, var(--rs-primary) 60%, white);
  }
</style>
Tip: The color-mix() function automatically creates dark and light variants of your primary color!

Hiding the Title & Description

If you want to hide the widget header (title and description), for example when embedding the form in a page that already has its own heading:

<style>
  .contact-header {
    display: none;
  }
</style>
Tip: This is useful when integrating the widget into an existing page layout where you provide your own title and context.

CSS Variables Reference

Here are all available CSS variables you can customize:

Complete Variables Block

:root {
  /* Primary Colors */
  --rs-primary: #72A98F;
  --rs-primary-dark: #5A8A73;
  --rs-primary-light: #A3C9B7;

  /* Backgrounds */
  --rs-background: #FAFAFA;
  --rs-surface: #F8F9FA;
  --rs-card-bg: #FFFFFF;
  --rs-border: #E8E8E8;

  /* Text */
  --rs-text: #2D3436;
  --rs-text-muted: #636E72;

  /* Errors */
  --rs-error-bg: #dc354530;
  --rs-error-text: #dc3545;
}

Custom Translations

Override default widget text using a JSON translations file:

Available Translation Keys

The following translation keys can be overridden:

Widget Header & Messages

Key Default Value Description
contact-widget-title Contact Us Main title displayed at the top of the widget
contact-widget-description Fill in the form below and we will get back to you as soon as possible. Description text below the title

Form Labels & Placeholders

Key Default Value Description
contactdata-name Name Label for the first name field
contactdata-lastname Last name Label for the last name field
contactdata-emailaddress Email address Label for the email field
contactdata-emailaddress-placeholder name@example.com Placeholder text for the email field
contactdata-phonenumber Phone number Label for the phone number field
contactdata-phonenumber-placeholder +32 123 456 789 Placeholder text for the phone number field
contactdata-info Info Label for the message/info textarea
contactdata-info-placeholder (empty) Placeholder text for the message textarea

Buttons

Key Default Value Description
button-submit Send Message Submit button text
button-submitting Submitting... Submit button text while form is being submitted
button-send-another Send another message Button text on success screen to send another message

Success Messages

Key Default Value Description
contact-success-title Thank you! Title shown after successful submission
contact-success-message Your message has been sent successfully. We will get back to you as soon as possible. Message shown after successful submission

Error Messages

Key Default Value Description
error-message-authentication-error We could not authenticate you. This is most likely due to an incorrect configuration Shown when API authentication fails
error-message-not-authenticated The component is not configured correctly Shown when widget is not properly configured

Step 1: Create a translations.json file

{
  "contact-widget-title": "Get in Touch",
  "contact-widget-description": "We'd love to hear from you! Fill out the form and we'll respond shortly.",
  "contactdata-name": "First Name",
  "contactdata-lastname": "Last Name",
  "contactdata-emailaddress": "Email",
  "contactdata-emailaddress-placeholder": "you@example.com",
  "contactdata-phonenumber": "Phone",
  "contactdata-phonenumber-placeholder": "+1 555 123 4567",
  "contactdata-info": "Your Message",
  "contactdata-info-placeholder": "Tell us how we can help...",
  "button-submit": "Send Message",
  "button-submitting": "Sending...",
  "contact-success-title": "Message Sent!",
  "contact-success-message": "Thank you for reaching out. We'll get back to you soon.",
  "button-send-another": "Send Another Message"
}

Step 2: Reference it in the widget

<realsuite-contact-widget
    apikey="your-api-key"
    translationsuri="/path/to/translations.json">
</realsuite-contact-widget>
Tip: You only need to include the keys you want to override. Missing keys will fall back to the default translations.

Full Examples

Example 1: General Contact Form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Us</title>

  <!-- Bootstrap CSS (required when using pre-built themes) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        rel="stylesheet">

  <!-- Widget CSS (required) -->
  <link href="https://elements.realsuite.be/contact-widget/beta/realsuite-contact-widget.css" rel="stylesheet">

  <!-- Pre-built theme (optional) -->
  <link href="https://elements.realsuite.be/contact-widget/beta/styles/theme-brand.css" rel="stylesheet">
</head>
<body>

  <realsuite-contact-widget
      apikey="your-api-key">
  </realsuite-contact-widget>

  <script src="https://elements.realsuite.be/contact-widget/beta/realsuite-contact-widget.js"></script>

</body>
</html>

Example 2: Contact Form Linked to Estate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact About Property</title>

  <!-- Bootstrap CSS (required when using pre-built themes) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        rel="stylesheet">

  <!-- Widget CSS (required) -->
  <link href="https://elements.realsuite.be/contact-widget/beta/realsuite-contact-widget.css" rel="stylesheet">

  <!-- Pre-built theme (optional) -->
  <link href="https://elements.realsuite.be/contact-widget/beta/styles/theme-brand.css" rel="stylesheet">

  <!-- Custom brand color -->
  <style>
    :root {
      --rs-primary: #e13d3f;
    }

    body {
      background: #f5f5f5;
      padding: 40px 20px;
    }

    realsuite-contact-widget {
      max-width: 600px;
      margin: 0 auto;
    }
  </style>
</head>
<body>

  <realsuite-contact-widget
      apikey="your-api-key"
      guid="43aaef38-816b-43ed-83c6-35d027a1c325"
      languageid="en">
  </realsuite-contact-widget>

  <script src="https://elements.realsuite.be/contact-widget/beta/realsuite-contact-widget.js"></script>

</body>
</html>