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.

Opgeven van de bron (source)

Standaard registreert de widget elke inzending met de bron widget. Als je het formulier integreert via een andere context — zoals een mobiele app of een website — kun je dit aanpassen via het data-source-attribuut.

Toegestane waarden zijn: widget (standaard), mobile-app, website.

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

Als je een ongeldige waarde opgeeft, valt de widget terug op de standaardwaarde widget.

Stijlisolatie (display mode)

Standaard wordt de widget direct in je pagina weergegeven en erft deze stijlen van je website. Als de CSS van je website de widget verstoort, kun je de widget in een Shadow DOM laten renderen met data-display-mode="isolated". In de geïsoleerde modus kan jouw CSS de widget niet beïnvloeden; alleen het lettertype van je pagina wordt nog overgenomen zodat de widget aansluit bij de typografie van je site.

Toegestane waarden zijn: inherit (standaard), isolated.

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

Als je een ongeldige waarde opgeeft, valt de widget terug op de standaardwaarde inherit.

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.

📊 Tracking & Analytics

De widget verstuurt automatisch een CustomEvent met de naam rumbledirect-track op het window-object, telkens wanneer een bezoeker het formulier start, van stap wisselt of afrondt. Hiermee kun je zelf metingen toevoegen aan bijvoorbeeld Google Analytics of Piwik/Matomo, zonder dat je hiervoor iets van RumbleDirect nodig hebt.

Luisteren naar het event

<script>
  window.addEventListener("rumbledirect-track", (event) => {
    const { type, data } = event.detail;
    console.log(type, data);
  });
</script>

Type events

type	Wanneer	Belangrijkste velden
init	Zodra het formulier is geladen	formId, source, totalSteps
step	Bij het openen van de eerste stap en bij elke stapwissel	formId, source, step, stepName, totalSteps, direction
finish	Na een succesvolle inzending	formId, source, dossierId

• formId — het id van het ingeladen formulier
• source — de waarde die je hebt opgegeven via data-source (standaard widget)
• step — het stapnummer, beginnend bij 1
• stepName — de technische naam van de huidige stap/pagina in het formulier
• totalSteps — het aantal op dat moment zichtbare stappen. Sommige stappen worden op basis van eerdere antwoorden overgeslagen, dus dit aantal kan per stap verschillen — reken er niet op dat dit een vast getal is
• direction — initial, forward of backward, afhankelijk van of de bezoeker net is gestart, vooruitgaat of teruggaat
• dossierId — het id van het aangemaakte dossier

Voorbeeld: Google Analytics (GA4)

<script>
  window.addEventListener("rumbledirect-track", (event) => {
    const { type, data } = event.detail;
    gtag("event", `rumbledirect_${type}`, data);
  });
</script>

Voorbeeld: Piwik / Matomo

<script>
  window.addEventListener("rumbledirect-track", (event) => {
    const { type, data } = event.detail;
    window._paq = window._paq || [];
    window._paq.push(["trackEvent", "RumbleDirect Widget", type, data.formId]);
  });
</script>

Deze koppeling is optioneel. Je hoeft niets te doen als je geen eigen analytics wilt toevoegen.

🧪 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! 🚀