Drop-in Vehicle Quote Widget: How to Add an ECU-Tuning Quote Engine to Any Existing Website

The chiptuning customer journey usually starts the same way: someone Googles “Stage 1 remap Audi A4 2018 price”. They land on a workshop’s marketing site (WordPress, Shopify, or just a plain HTML page). The marketing site doesn’t have a price for that specific car — it has a “Contact us” form. The customer either fills the form and waits, or closes the tab and Googles a competitor.

A drop-in vehicle quote widget intercepts that customer. They pick their car from a cascading dropdown (make → model → engine), pick the service (Stage 1, Stage 2, DPF, etc.), and see the live price within 3 seconds. If the price works for them, they continue into the file-request flow with the vehicle pre-selected. If it doesn’t, you’ve at least learned they were interested.

This post explains how the widget works, where it gets the data, what the install actually looks like (literally one <script> tag on most sites), and why a quote engine on the marketing site moves the conversion needle more than any landing-page redesign.

What the widget actually does

The widget renders three pieces on the customer’s screen:

1. Cascading vehicle picker — Make → Model → Generation → Engine
2. Service picker — Stage 1, Stage 2, DPF Off, EGR Off, AdBlue Off, Pops & Bangs, Launch Control, etc.
3. Live price + CTA — “£249.00 · Get quote →”

Behind the scenes:

• The vehicle catalogue comes from your portal’s database (the same 10,000+ vehicle list used by your file-request wizard). Single source of truth — when you add a new vehicle to your portal, the widget shows it the next time it loads.
• Pricing comes from your portal’s pricing rules (per ECU family, per service, per modifier). Update a base price in the portal admin; the widget reflects the change within minutes.
• The CTA links to your portal’s file-request form with the vehicle and service pre-filled. The customer arrives at the form already 3 steps in.

The widget is, technically, a small JavaScript bundle hosted on your portal’s domain that mounts into a <div> on your marketing site. Same-origin policies and CORS are pre-configured by the portal.

The install — one tag

The customer’s experience starts with one <script> tag on your marketing page:

<!-- Anywhere on your marketing site -->
<div id="ts-quoter"></div>
<script
  src="https://files.your-domain.com/widget.js"
  data-target="#ts-quoter"
  data-theme="dark"
  async></script>

That’s it. WordPress (paste into a Custom HTML block), Shopify (paste into a Custom Liquid section), Webflow (Embed Element), plain HTML (paste into the page body), Squarespace (Code Block) — all support this pattern out of the box.

Configuration options via data- attributes:

The widget inherits your portal’s brand colours by default — no CSS overrides needed. If your marketing site uses a different colour scheme, override via the theme attribute or a custom CSS class.

Why the embed beats a separate quote page

A common alternative: build a quote page on the portal itself, link to it from the marketing site. “Click here for an instant quote → opens portal”.

The widget approach beats this for three concrete reasons:

1. No domain handoff. The customer’s perception of “I’m on the workshop’s site” stays intact. Sending them to portal.workshop.com for the quote breaks the visual continuity — even if the portal is white-labelled, the URL changes and the brain notices.

2. SEO continuity. Your marketing site has rankings, backlinks, and authority. Keep the customer on the marketing site for the quote, and that authority compounds. Bouncing them to a sub-domain leaks signal.

3. Lower friction. No new page load. No new domain trust check. The widget renders in the same tab the customer’s already trusting.

A dedicated quote page on the portal is a fine backup option for customers who land directly on the portal, but the marketing-site embed is the primary entry point.

What about lead capture without a quote?

The widget is a quote engine, not a contact form. If you want lead capture (name + email + “tell us more”), pair the widget with a separate form below it:

“Got a question we didn’t answer? Get a human reply →” [contact form]

The customer who gets a price they’re happy with proceeds to the file-request CTA. The customer who doesn’t fits the form. Both paths captured.

Updating the widget — zero customer-side work

When you update your portal (new ECU families, new pricing tiers, new vehicles), the widget picks up changes on its next load. No re-install on the marketing site, no version coordination — the widget reads from your portal’s API live.

The only operational requirement: if you change your portal’s domain, you also update the src= URL in the <script> tag. That’s it.

Cross-domain considerations

The widget loads from your portal’s domain (e.g. files.your-shop.com) into your marketing site (e.g. your-shop.com). Same-domain or sister-subdomain — both work with the widget’s CORS configuration.

What does NOT work:

• Loading the widget on a competitor’s site (CORS blocks; only domains you whitelist work)
• Loading the widget on a fully unrelated domain unless explicitly allowed

The portal admin should expose a “Trusted domains” list in widget settings — your marketing site, any partner sites you authorise, and that’s it.

Privacy / GDPR

The widget collects:

• The customer’s vehicle picks (transient — only persisted if they continue to the quote flow)
• The page they’re embedded on (for analytics)

If your portal honours Do-Not-Track and prefers-reduced-motion, the widget should too. No tracking pixels, no third-party cookies, no fingerprinting. The widget is a tool, not a tracker.

GDPR-wise, the widget falls under “essential functional cookies” — required for the user’s requested service (getting a quote). No consent banner needed for the widget itself, though your marketing site’s overall banner may cover analytics elsewhere.

What this looks like in TunerSuite

The TunerSuite embeddable widget ships with every install — no separate purchase, no per-domain fee, no rate limits on legitimate use. The portal admin generates a <script> tag from Settings Hub → Embed Widget; you paste it into your marketing site.

The widget inherits:
– Your portal’s white-label branding (logo, colours, fonts)
– Your portal’s vehicle database (10,000+ vehicles seeded)
– Your portal’s pricing rules

Updates to any of those flow through to the widget automatically. A workshop that doesn’t have a marketing site yet can also use the widget on a static landing page — Carrd, Webflow, even GitHub Pages — and treat that as their lightweight marketing front-end.

Bundled in the TunerSuite licence — £699 setup + £49.99/month.

FAQ

Will the widget slow down my marketing site?
The widget loads async — it doesn’t block your page render. Initial bundle is ~30 KB minified + gzipped. Most marketing sites won’t measure a difference.

Can I style the widget to match my brand?
The widget uses CSS custom properties for colours, fonts, and spacing. Override them in your marketing site’s CSS to match your brand precisely. The widget also supports a data-theme="light" / data-theme="dark" attribute for quick swaps.

What if my customer’s vehicle isn’t in the database?
The cascading picker falls back to “Other / Custom” → the customer types make + model + year manually. The quote shows an “estimated” price (based on ECU family if known), and the file-request flow captures the manual entry for your team to review.

Can I have multiple widgets on the same page?
Yes — useful for “Stage 1 quote here” + “Stage 3 quote here” sections. Each widget gets its own <div> ID and data-services filter.

Does it work on mobile?
Yes — the widget is responsive by default. Picker dropdowns adapt to touch input; the price + CTA stay visible without scrolling.

Next step

If you’re running TunerSuite, generate your widget tag from Settings Hub → Embed Widget and paste it into your homepage. Test in incognito to confirm it loads cleanly.

If you don’t have a TunerSuite portal yet but want the widget concept on your marketing site, the £699 one-time licence is the entry point — the widget comes free with every install. For the vehicle catalogue powering the widget, see the ECU knowledge base.