Embed

One iframe, live on your existing site

The widget is a stripped-back version of the decoder built for embedding: no site chrome, links open in a new tab, and it reports its own height to the parent page.

Paste this into your page

Works in a PHP template, a CMS block or a static HTML page. Replace the host with your published address.

Embed code

<iframe src="https://YOUR-APP.lovable.app/widget"
        style="width:100%;max-width:640px;height:720px;border:0"
        title="VIN Decoder"
        loading="lazy"></iframe>

Optional: auto-resize the frame

The widget posts its height to the parent window after every render. Add this listener to drop the fixed height entirely.

Resize script

<script>
window.addEventListener('message', function (event) {
  if (!event.data || event.data.type !== 'vin-widget-height') return;
  var frame = document.querySelector('iframe[title="VIN Decoder"]');
  if (frame) frame.style.height = (event.data.height + 24) + 'px';
});
</script>

Configure it with URL parameters

Every option is a query string parameter on the widget URL — no build step and no JavaScript configuration object.

vinPrefills the field and decodes on load.17 characters
categoryPreselects the parts category filter. Unknown values are ignored.Brakes, Filters, Ignition, Suspension, Cooling, Electrical, Drivetrain, Belts & Hoses
lockCategoryHides the category control so results stay pinned to the category above.1 or 0
limitParts results per page. 0 lists every match at once.0–50
themeWidget background. Use transparent to inherit your own page colour.light, surface, transparent
partsSet to 0 for a decode-only widget with no parts lookup.1 or 0
headerHides the widget heading and intro line.1 or 0
titleReplaces the widget heading with your own wording.text

Prefer to click than to type?

The snippet generator sets every parameter with a form, previews the widget live and copies the finished iframe URL.

Open the snippet generator

Configured embed

<iframe
  src="https://YOUR-APP.lovable.app/widget?vin=1HGCM82633A004352&category=Brakes&lockCategory=1&limit=10&theme=transparent&header=0&title=Find+your+brakes"
  style="width:100%;max-width:640px;height:720px;border:0"
  title="VIN Decoder"
  loading="lazy"></iframe>

Building the URL in PHP

<?php
$options = [
  'vin'          => $_GET['vin'] ?? '',
  'category'     => 'Brakes',
  'lockCategory' => 1,
  'limit'        => 10,
  'theme'        => 'transparent',
  'header'       => 0,
];

$src = 'https://YOUR-APP.lovable.app/widget?' . http_build_query($options);
?>
<iframe src="<?= htmlspecialchars($src) ?>"
        style="width:100%;max-width:640px;height:720px;border:0"
        title="VIN Decoder" loading="lazy"></iframe>

No API key

The widget is a public page. Nothing to provision, rotate or leak into client-side source.

Responsive by default

The layout adapts down to narrow sidebars, so it works in a page column as well as full width.

Deep links out

Part results link to the full detail page in a new tab, keeping the visitor on your site.