RepairDirect Widget

De RepairDirect Widget maakt het mogelijk om schade-intakes direct vanaf je eigen website, zonder dat je zelf formulieren hoeft te bouwen of logica hoeft in te richten. De widget wordt ingeladen via een extern JavaScript-bestand en weergegeven binnen een HTML-element op de pagina.

Deze oplossing is ideaal voor bijvoorbeeld dealerwebsites, leasemaatschappijen of softwarepartners die RumbleDirect willen integreren in hun eigen omgeving, op een manier die zowel visueel als functioneel naadloos aansluit.

🔧 Hoe werkt het?

De widget werkt als volgt:

1. Je plaatst een <script>-tag op de pagina die het benodigde JavaScript-bestand laadt vanaf onze CDN.
2. Je voegt een <div> toe op de plek waar je de widget zichtbaar wilt maken.
3. Zodra de pagina is geladen, initialiseert het script automatisch de widget binnen het opgegeven element.

🌐 Omgevingen

We ondersteunen twee verschillende omgevingen:

• Acceptatieomgeving:
  Voor testen en ontwikkeling.
  CDN URL: https://cdn.rumbledirect.dev/widget/latest/index.js

• Productieomgeving:
  Voor livegebruik in je publieke omgeving.
  CDN URL: https://cdn.rumbledirect.com/widget/latest/index.js

Tijdens het integratieproces zullen wij aangeven welke omgeving je kunt gebruiken. Ook ontvang je van ons de benodigde configuratiegegevens: clientIdentifier en formId of viewConfigurationId, en (optioneel) servicePartnerId.

📦 Integreren in je pagina

1. Voeg het script toe

Plaats de volgende <script>-tag vlak vóór de sluitende </body>-tag van je HTML:

<script
  src="https://cdn.rumbledirect.dev/widget/latest/index.js"
  defer
></script>

Let op: Gebruik in productie de cdn.rumbledirect.com URL.

2. Voeg de widget-container toe

Op de plek waar je de widget wilt tonen, voeg je dit <div>-element toe:

<div
  id="rumbledirect-widget"
  data-client-identifier="YOUR_CLIENT_IDENTIFIER"
  data-form-id="YOUR_FORM_ID"
></div>

Integratie met een ViewConfiguration landingspagina

In plaats van een data-form-id kun je ook een data-view-configuration-id gebruiken. Hiermee wordt een door ons geconfigureerde landingspagina getoond waarop de gebruiker een schadetype kan selecteren, waarna het bijbehorende formulier wordt geladen.

<div
  id="rumbledirect-widget"
  data-client-identifier="YOUR_CLIENT_IDENTIFIER"
  data-view-configuration-id="YOUR_VIEW_CONFIGURATION_ID"
></div>

Let op: Gebruik data-form-id of data-view-configuration-id, niet beide tegelijk.

Integratie voor specifieke herstellers

Voor lokale vestigingen of specifieke herstellers kun je ook een data-service-partner-id toevoegen:

<div
  id="rumbledirect-widget"
  data-client-identifier="YOUR_CLIENT_IDENTIFIER"
  data-form-id="YOUR_FORM_ID"
  data-service-partner-id="YOUR_SERVICE_PARTNER_ID"
></div>

Integratie voor specifieke hersteller groepen (collections)

Als je wilt integreren met een collectie van servicepartners (in plaats van een enkele partner), voeg dan een data-service-partner-collection-id toe. Met dit attribuut kun je meerdere servicepartners als een collectie targeten.

<div
  id="rumbledirect-widget"
  data-client-identifier="YOUR_CLIENT_IDENTIFIER"
  data-form-id="YOUR_FORM_ID"
  data-service-partner-collection-id="YOUR_SERVICE_PARTNER_COLLECTION_ID"
></div>

Vervang YOUR_CLIENT_IDENTIFIER, YOUR_FORM_ID (of YOUR_VIEW_CONFIGURATION_ID) en (indien van toepassing) YOUR_SERVICE_PARTNER_ID of YOUR_SERVICE_PARTNER_COLLECTION_ID met de gegevens die wij je toesturen.

De id van het div-element moet altijd rumbledirect-widget zijn. De widget wordt automatisch geladen zodra het script is ingeladen en de div correct is geplaatst.

3. Voorinvullen van gegevens (prefill)

Je kunt het formulier vooraf vullen met bekende gegevens door een data-prefill-data-attribuut toe te voegen aan het widget-element. De waarde is een JSON-object met de volgende structuur:

type PrefillData = {
  licensePlate?: {
    country: string;
    identifier: string;
  } | null;
  driver?: {
    firstName?: string | null;
    subName?: string | null;
    lastName?: string | null;
    email?: string | null;
    telephone?: string | null;
  } | null;
  address?: {
    country?: string | null;
    postalCode?: string | null;
    streetNumber?: string | null;
    streetNumberAddition?: string | null;
    street?: string | null;
    city?: string | null;
  } | null;
  vehicle?: {
    brand?: string | null;
    model?: string | null;
    trim?: string | null;
    fuelType?: string | null; // ["petrol", "diesel", "ev", "hydrogen", ... etc]
    vehicleType?: string | null; // ["passenger_car", "lcv", "bus", ... etc]
    vinNumber?: string | null;
    listPrice?: number | null;
    firstRegistrationAt?: string | null;
    weight?: number | null;
    length?: number | null;
    width?: number | null;
    height?: number | null;
  } | null;
  damage?: {
    damageNumber?: string | null;
    damageFromDirection?: string | null;
    damagePart?: string | null;
    typeOfDamage?: string | null;
    damageClaimable?: boolean | null;
  } | null;
  contract?: {
    leaseLabel?: string | null;
    replacementVehicle?: boolean | null;
    maxKilometers?: number | null;
    insurerName?: string | null;
    externalInsured?: boolean | null;
    deductibleAmount?: number | null;
    leaseContractEndAt?: string | null;
    privateLease?: boolean | null;
  } | null;
};

Alle velden zijn optioneel. Je hoeft alleen de velden mee te geven die je wilt voorinvullen.

Voorbeeld

<div
  id="rumbledirect-widget"
  data-client-identifier="YOUR_CLIENT_IDENTIFIER"
  data-form-id="YOUR_FORM_ID"
  data-prefill-data='{
    "licensePlate": { "country": "NL", "identifier": "AB-123-CD" },
    "driver": {
      "firstName": "Jan",
      "lastName": "Jansen",
      "email": "[email protected]",
      "telephone": "0612345678"
    }
  }'
></div>

Belangrijk: Om XSS-kwetsbaarheden te voorkomen, moet je de JSON-waarde altijd HTML-entity-encoden voordat je deze in het data-prefill-data-attribuut plaatst. De widget decodeert de HTML-entities automatisch voordat de JSON wordt verwerkt. Gebruik hiervoor een encoding-functie zoals htmlspecialchars() in PHP, html.escape() in Python, HtmlEncoder.Default.Encode() in C#, of html-entities in JavaScript.

🧪 Klaar om te testen?

Zodra de widget zichtbaar is, kun je direct een testmelding doen (in de acceptatieomgeving). Wij helpen je uiteraard bij het controleren van de integratie en kunnen meekijken indien gewenst.

Heb je vragen of loop je ergens tegenaan? Mail ons op [email protected] — we staan voor je klaar.

Veel succes met de integratie! 🚀