HTML VIN report integration

Customer implementation

The browser widget reads data-vin, uses /api/service/vin/{vin}/html by default, requests text/html, and places the trusted API response inside the div. Supply data-api-url only to override the endpoint template.

Keep the production API key server-side

The recommended API URL is your own same-origin server endpoint. That endpoint adds the bearer key and forwards the HTML response. Never place a live customer key in HTML, browser JavaScript, source control, or a public bundle.

1. Add the report div

The public demo key may be placed in browser markup because it is restricted to five distinct VINs per client per UTC day. The widget safely URL-encodes the VIN before making the request.

                    <div id="vehicle-report"
     data-autodealer-vin-report
     data-api-key="ad_live_demo.keysecret"
     data-vin="1HGCM82633A004352"
     data-loading-text="Loading vehicle details...">
</div>

<script src="https://autodealer.dev/Scripts/autodealer-vin-report.js"></script>

Customers may load the hosted script as shown or download and serve the same file from their own versioned assets.

2. Add a secure C# proxy

This ASP.NET MVC example validates the VIN, reads the secret from the server environment, calls the HTML route, and returns the fragment to the browser.

                    
private static readonly Regex VinPattern =
    new Regex("^[A-HJ-NPR-Z0-9]{17}$", RegexOptions.CultureInvariant);

[HttpGet]
public async Task<ActionResult> VinReport(string vin) {
    vin = (vin ?? string.Empty).Trim().ToUpperInvariant();
    if (!VinPattern.IsMatch(vin))
        return new HttpStatusCodeResult(400, "Invalid VIN");

    var apiKey = Environment.GetEnvironmentVariable("AUTODEALER_API_KEY");
    using (var client = new HttpClient()) {
        client.BaseAddress = new Uri("https://api.autodealer.dev/");
        client.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("Bearer", apiKey);
        client.DefaultRequestHeaders.Accept.Add(
            new MediaTypeWithQualityHeaderValue("text/html"));

        var response = await client.GetAsync(
            "api/service/vin/" + Uri.EscapeDataString(vin) + "/html");
        var body = await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
            return new HttpStatusCodeResult((int)response.StatusCode, body);

        return Content(body, "text/html", Encoding.UTF8);
    }
}

jQuery without the widget

If the customer already uses jQuery, the same server proxy can be called directly.

                    
var vin = "1HGCM82633A004352";

$.ajax({
  url: "/vehicles/vin-report",
  data: { vin: vin },
  dataType: "html",
  cache: false
}).done(function (reportHtml) {
  $("#vehicle-report").html(reportHtml);
}).fail(function (xhr) {
  $("#vehicle-report").text(
    xhr.status === 404 ? "Vehicle not found." : "Unable to load vehicle report."
  );
});

cURL

Server-side tools can call the AutoDealer.dev endpoint directly with the bearer credential.

                    curl --request GET \
  "https://autodealer.dev/api/service/vin/1HGCM82633A004352/html" \
  --header "Authorization: Bearer $AUTODEALER_API_KEY" \
  --header "Accept: text/html" \
  --output vehicle-report.html

Change the VIN dynamically

Set the new VIN and call load. The widget aborts an earlier in-flight request before starting the next one.

                    var report = document.getElementById("vehicle-report");
var nextVin = document.getElementById("vin-input").value;

AutoDealerVinReport.load(report, nextVin)
  .then(function () { console.log("Vehicle report rendered"); })
  .catch(function (error) { console.error(error.message); });

Loading, loaded, and error events

EVENT autodealer:loading Request is starting

EVENT autodealer:loaded HTML is rendered

EVENT autodealer:error Validation or request failed

                    document.getElementById("vehicle-report")
  .addEventListener("autodealer:loaded", function (event) {
    console.log("Rendered VIN", event.detail.vin);
  });

Integration checklist

VIN Exactly 17 uppercase letters or digits; I, O, and Q are not allowed

URL Must contain {vin} and return the API HTML fragment

AUTH Send Authorization: Bearer <key> from the server proxy

TYPE Request and return text/html; charset=utf-8

ERRORS Handle 400, 401, 403, 422, 429, and 5xx responses without inserting error text as HTML

Authentication and API keys

Render a complete vehicle report.