🚗 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

Updates both the default card above and the fluid card below.

Connection

Token (JWT):

BFF URL:

Dealer Company ID:

Route

Pickup ZIP:

Dropoff Postal Code Options (comma-separated):

Vehicle

VIN:

Year:

Make:

Model:

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. If the parent has no fixed height (a normal page or popup window), the card scales to the parent's width instead and the page grows to fit it. 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> 

Fluid card in a popup window

The dashed box above has a fixed height. Most integrators embed the card in a page that doesn't — e.g. a popup window, where <body> is only as tall as its content. This opens the fluid card alone in a plain auto-height popup (using the Card Widget Test Form values) so you can resize the window and check that the card fills its width.

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

Connection

Token (JWT):

BFF URL:

Dealer Company ID:

Route

Pickup ZIP:

Dropoff ZIP:

Vehicle

VIN:

Year:

Make:

Model:

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

Required Properties

bff-url: Backend for Frontend API endpoint. Read once when the widget loads.
token: JWT authentication token
pickup-postal-code: Pickup ZIP/postal code — 5-digit US ZIP or Canadian postal code, e.g. "A1A 1A1"

Vehicle Properties

Provide a VIN, or Year + Make + Model. At least one of the two is required.

vin: 17-character VIN. If provided, it must be valid.
year: Vehicle year (4 digits). Required if no VIN.
make: Vehicle make. Required if no VIN.
model: Vehicle model. Required if no VIN.
is-operable: boolean - true for operable, false for inoperable (default: true)

Optional Properties

dealer-company-id: End user's company identifier — the company requesting the quote, not your own. Used for analytics context and read once when the widget loads.

Card-Only Properties

dropoff-postal-code-options: Set via JavaScript (not an attribute). Array of ZIP codes for the dropoff dropdown; the first entry is priced on load. Configure with the user's preferred locations, such as saved dealership postal codes tied to their account. If empty, no price is requested until the user enters a dropoff ZIP.
fluid: boolean - 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. In a parent with no definite height, it scales to the parent's width and the page grows to fit (default: false)

Banner-Only Properties

dropoff-postal-code: Dropoff ZIP/postal code — 5-digit US ZIP or Canadian postal code. If omitted or empty, the banner shows a prompt asking the user to enter a zip code instead of an error.
vertical-view: boolean - When true, the banner fills its container width and stacks its sections (logo, shipping cost, CTA) vertically for mobile layouts (default: false)

Events

widgetReady: Fired when the widget finishes loading (no detail)
priceLoaded: Fired when a price estimate is returned. Detail: { minPrice, maxPrice, currency }
ctaClicked: Fired when the user clicks the call-to-action link ("Take control today with Central Dispatch." on the card, "Sign up for lower shipping costs on Central Dispatch" on the banner). No detail.
errorOccurred: Fired when pricing fails. Detail: { message, code }, where code is one of INVALID_ZIP (banner only), NO_PRICE_DATA, SERVICE_UNAVAILABLE, or the HTTP status code

Card-Only Events

locationChanged: Fired when the user changes a ZIP code. Detail: { pickupPostalCode, dropoffPostalCode }
zipValidationError: Fired when the API rejects the ZIP code. Detail: { message: 'Invalid ZIP' }