VDP Widget Demo

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="./vdp-widget.css">
<script src="./vdp-widget.umd.js"></script>

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