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.

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.

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