🚗 CD PriceCheck Widget - Layout Demo

Testing both Banner and Card layouts with all sub-components

Environment Information

Environment:
BFF URL:

Card Layout DEFAULT

Full vertical layout with all features. Best for dedicated pricing pages or when you want to give the widget prominent placement. Includes logo, location inputs, pricing display, and value proposition.

🧪 Card Widget Test Form

Token (JWT):

Pickup ZIP:

Dropoff Postal Code Options (comma-separated):

Vehicle VIN:

Operability:

 <cd-price-check-widget-card
  bff-url="https://your-bff-url.com"
  token="your-auth-token"
  pickup-postal-code="85044"
  vin="1HGBH41JXMN109186"
  year="2021"
  make="Honda"
  model="Accord"
  is-operable="true"
></cd-price-check-widget-card> 

Card Layout FLUID

Opt in with the fluid attribute to let the card grow to fit its parent container while keeping its original proportions — every element scales together, so nothing reflows or distorts. The card always stays fully visible: it scales to fit within the box on whichever dimension is more constraining, with any leftover room on the other dimension showing as blank space rather than a scrollbar. It also never renders smaller than the fixed-size card above — drag the bottom-right corner of the dashed box below and notice it won't let you shrink it past that floor.

 <cd-price-check-widget-card
  bff-url="https://your-bff-url.com"
  token="your-auth-token"
  pickup-postal-code="85044"
  vin="1HGBH41JXMN109186"
  year="2021"
  make="Honda"
  model="Accord"
  is-operable="true"
  fluid="true"
></cd-price-check-widget-card> 

Banner Layout

Compact horizontal layout optimized for space-constrained areas like headers, sidebars, or embedded sections. Shows essential information in a streamlined format.

🧪 Banner Widget Test Form

Token (JWT):

Pickup ZIP:

Dropoff ZIP:

Vehicle VIN:

Operability:

 <cd-price-check-widget-banner
  bff-url="https://your-bff-url.com"
  token="your-auth-token"
  pickup-postal-code="10001"
  dropoff-postal-code="90210"
  vin="JH4KA7561MC010714"
  year="2020"
  make="Acura"
  model="NSX"
  is-operable="true"
></cd-price-check-widget-banner> 

 <cd-price-check-widget-banner
  bff-url="https://your-bff-url.com"
  token="your-auth-token"
  pickup-postal-code="10001"
  dropoff-postal-code="90210"
  vin="JH4KA7561MC010714"
  year="2020"
  make="Acura"
  model="NSX"
  is-operable="true"
  vertical-view="true"
></cd-price-check-widget-banner> 

📋 Event Log

All widget events are logged here in real-time. Watch for lifecycle events, user interactions, and API calls.

[00:00:00] INIT Event log initialized. Watching both widgets...

📚 Integration Guide

Available Properties

bff-url: Backend for Frontend API endpoint (required)
token: Authentication token (required)
vin: 17-character VIN (required)
pickup-postal-code: Pickup ZIP/postal code — 5-digit US ZIP or Canadian postal code, e.g. "A1A 1A1" (required)
dropoff-postal-code: Dropoff ZIP/postal code — 5-digit US ZIP or Canadian postal code (Banner only). If omitted or empty, the banner shows a prompt asking the user to enter a zip code instead of an error.
dropoff-postal-code-options: Array of ZIP codes for dropdown (Card only - optional, set via JavaScript). Configure with user's preferred locations, such as saved dealership postal codes tied to their account.
year: Vehicle year (required)
make: Vehicle make (required)
model: Vehicle model (required)
is-operable: boolean - true for operable, false for inoperable (default: true)
fluid: boolean - Card only. When true, the card scales uniformly to fit within its parent container (never below its native fixed size, up to 3x), preserving its original proportions; any leftover space on either dimension shows as blank space rather than a scrollbar or a stretched/squished card (default: false)

Events

widgetReady: Fired when widget initializes
priceLoaded: Fired when pricing data is fetched (contains pricing data)
locationChanged: Fired when user updates ZIP codes (Card only - contains new locations)
zipValidationError: Fired when ZIP validation fails from API (Card only - contains error message)
ctaClicked: Fired when user clicks "Post your vehicle now"
errorOccurred: Fired when an error occurs (contains error details)

Example Event Listener

 const widget = document.querySelector('cd-price-check-widget-card'); // or 'cd-price-check-widget-banner'

widget.addEventListener('priceLoaded', (event) => {
  const { minPrice, maxPrice, distance } = event.detail;
  console.log(`Price: $${minPrice} - $${maxPrice} for ${distance} miles`);
});

widget.addEventListener('locationChanged', (event) => {
  const { pickupPostalCode, dropoffPostalCode } = event.detail;
  console.log(`Location changed: ${pickupPostalCode} → ${dropoffPostalCode}`);
}); 