🚗 CD PriceCheck Widget - Layout Demo

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

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.

Card Layout MOVED BY HOST

Simulates a host page moving the same widget element to another container, as dialog and popup libraries often do. Uses the token and values from the Card form above (pickup ZIP 30318 against the local mocks). Keep DevTools Network open, filtered to price-check.

1. Load widget creates a fresh card in the page slot. It should show a price.
2. Move to other box, then Request new price: the card should load a new price in its new container.
3. Set DevTools throttling to 3G, then Request + move at once (moves the card 300 ms after the request starts): the first request shows as canceled, then a retry loads the price.
4. Detach, update, reattach removes the card, changes a prop while it's detached, and puts it back after 1 second: it should load a price for the new value.

In every case the card should never show "Due to a system error". The log below lists each move and event.

Banner Layout

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

📋 Event Log

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

📚 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, ZIP+4 ("12345-6789", "12345 6789" or "123456789", all normalized to the hyphenated form), 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, ZIP+4 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' }