🚗 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> 

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> 

📋 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: 5-digit pickup ZIP code (required)
dropoff-postal-code: 5-digit dropoff ZIP code (Banner only - required for banner layout)
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)

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}`);
}); 