VDP Widget Demo

Pass GUIDs via query parameters to test: ?vehicleGuid={guid}&dealerNodeGuid={guid}&apiUrl={url}

iFrame Embedding Demo

This demonstrates the widget embedded in an iframe with fullscreen support:

How to Embed

The widget can be embedded in two ways:

Method 1: iFrame Embedding (Recommended for cross-domain)

<iframe
  src="https://vdp.xcceleraite.ai/iframe.html?vehicleGuid={guid}&dealerNodeGuid={guid}&apiUrl={apiUrl}"
  width="100%"
  height="600px"
  frameborder="0"
  allow="fullscreen"
  allowfullscreen>
</iframe>

Note: The allow="fullscreen" and allowfullscreen attributes are required for fullscreen functionality.

Method 2: Custom Element (Direct embedding)

Available files:

vdp-widget.umd.js - UMD build (for script tags)
vdp-widget.es.js - ES module build (for import statements)
vdp-widget.css - Widget styles

<link rel="stylesheet" href="https://vdp.xcceleraite.ai/vdp-widget.css"
      integrity="SHA384_HASH_HERE" crossorigin="anonymous">
<script src="https://vdp.xcceleraite.ai/vdp-widget.umd.js"
        integrity="SHA384_HASH_HERE" crossorigin="anonymous"></script>

<vdp-widget
  vehicle-guid="YOUR-VEHICLE-GUID"
  dealer-node-guid="YOUR-DEALER-GUID"
  api-url="https://api.dev.gardxconnect.com/v1">
</vdp-widget>

Security: Replace SHA384_HASH_HERE with values from /sri-hashes.json to enable Subresource Integrity verification.