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: clientId, clientSecret, formId 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-id="YOUR_CLIENT_ID"
  data-client-secret="YOUR_CLIENT_SECRET"
  data-form-id="YOUR_FORM_ID"
></div>

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-id="YOUR_CLIENT_ID"
  data-client-secret="YOUR_CLIENT_SECRET"
  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-id="YOUR_CLIENT_ID"
  data-client-secret="YOUR_CLIENT_SECRET"
  data-form-id="YOUR_FORM_ID"
  data-service-partner-collection-id="YOUR_SERVICE_PARTNER_COLLECTION_ID"
></div>

Replace YOUR_CLIENT_ID, YOUR_CLIENT_SECRET, YOUR_FORM_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.

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