RepairDirect Widget

The RepairDirect Widget enables vehicle damage intake submissions directly from your own website, without the need to build forms or set up any logic yourself. The widget is loaded via an external JavaScript file and rendered within an HTML element on the page.

This solution is ideal for dealer websites, leasing companies, or software partners who want to integrate RumbleDirect into their own environment in a way that is both visually and functionally seamless.

🔧 How does it work?

The widget works as follows:

1. You place a <script> tag on the page to load the required JavaScript file from our CDN.
2. You add a <div> where you want the widget to appear.
3. Once the page loads, the script automatically initialises the widget within the specified element.

🌐 Environments

We support two environments:

• Acceptance environment:
  For testing and development.
  CDN URL: https://cdn.rumbledirect.dev/widget/latest/index.js

• Production environment:
  For live use in your public environment.
  CDN URL: https://cdn.rumbledirect.com/widget/latest/index.js

During the integration process, we’ll let you know which environment to use. You’ll also receive the required configuration details: clientIdentifier and formId or viewConfigurationId, and (optionally) servicePartnerId.

📦 Integrating into your page

1. Add the script

Place the following <script> tag just before the closing </body> tag of your HTML:

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

Note: Use the cdn.rumbledirect.com URL for production.

2. Add the widget container

Where you want the widget to appear, add the following <div> element:

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

Integration with a ViewConfiguration landing page

Instead of a data-form-id, you can use a data-view-configuration-id. This displays a landing page configured by us, where the user selects a damage type before loading the corresponding form.

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

Note: Use data-form-id or data-view-configuration-id, not both at the same time.

Integration for specific service partners

For local branches or specific repairers, you can also add a data-service-partner-id.

<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>

Integration for specific service partner groups (collections)

If you want to integrate with a collection of service partners (rather than a single partner), add a data-service-partner-collection-id. This attribute allows you to target multiple service partners as a collection.

<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>

Replace YOUR_CLIENT_IDENTIFIER, YOUR_FORM_ID (or YOUR_VIEW_CONFIGURATION_ID) and (if applicable) YOUR_SERVICE_PARTNER_ID or YOUR_SERVICE_PARTNER_COLLECTION_ID with the values we’ll send you.

The id of the div element must always be rumbledirect-widget. The widget will load automatically as soon as the script is loaded and the div is properly placed.

Specifying the source

By default, the widget tags every submission with the source widget. If you are integrating the form in a different context — such as a mobile app or a website — you can override this using the data-source attribute.

Allowed values are: widget (default), mobile-app, website.

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

If you provide an invalid value, the widget falls back to the default widget.

Style isolation (display mode)

By default, the widget renders directly in your page and inherits styles from your website. If your website's CSS interferes with the widget, you can render it inside a Shadow DOM using data-display-mode="isolated". In isolated mode your CSS cannot affect the widget; only the font family of your page is still inherited so the widget matches your site's typography.

Allowed values are: inherit (default), isolated.

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

If you provide an invalid value, the widget falls back to the default inherit.

3. Prefilling data

You can prefill the form with known data by adding a data-prefill-data attribute to the widget element. The value is a JSON object with the following structure:

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;
};

All fields are optional. Include only the fields you want to prefill.

Example

<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": "John",
      "lastName": "Doe",
      "email": "[email protected]",
      "telephone": "0612345678"
    }
  }'
></div>

Important: To prevent XSS vulnerabilities, always HTML-entity-encode the JSON value before placing it in the data-prefill-data attribute. The widget automatically decodes HTML entities before processing the JSON. Use an encoding function such as htmlspecialchars() in PHP, html.escape() in Python, HtmlEncoder.Default.Encode() in C#, or html-entities in JavaScript.

📊 Tracking & Analytics

The widget automatically dispatches a CustomEvent named rumbledirect-track on the window object whenever a visitor starts the form, moves between steps, or finishes it. You can use this to send your own measurements to tools such as Google Analytics or Piwik/Matomo, without needing anything from RumbleDirect.

Listening for the event

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

Event types

type	When	Key fields
init	As soon as the form has loaded	formId, source, totalSteps
step	On the first step and on every step change	formId, source, step, stepName, totalSteps, direction
finish	After a successful submission	formId, source, dossierId

• formId — the id of the loaded form
• source — the value you provided via data-source (defaults to widget)
• step — the step number, starting at 1
• stepName — the technical name of the current step/page in the form
• totalSteps — the number of steps that are currently visible. Some steps are skipped based on earlier answers, so this number can differ from step to step — don't rely on it being a fixed value
• direction — initial, forward, or backward, depending on whether the visitor just started, moved forward, or moved back
• dossierId — the id of the created dossier

Example: Google Analytics (GA4)

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

Example: 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>

This integration is optional. You don't need to do anything if you don't want to add your own analytics.

🧪 Ready to test?

Once the widget is visible, you can immediately submit a test case (in the acceptance environment). We’ll gladly assist with checking your integration and can take a look with you if needed.

Got questions or ran into issues? Email us at [email protected] — we’re here to help.

Good luck with the integration! 🚀