Carposé Components Documentation
Welcome to the developer documentation for Carposé embeddable components — the widgets that display vehicle inventory, offers, stores, and team members directly on your website.
How integration works
Every component is added to your page with a single <div> carrying a data-carpose-component attribute and your API key. The library loads the component, renders it inside an isolated Shadow DOM, and initialises it automatically.
First, load the integration script once:
<script type="text/javascript" src="https://integration.carpose.app/integration.js"></script>Then drop in any component:
<div
data-carpose-component="vehicle-search"
data-api-key="your-api-key"
data-search-url-forward="/search-results"
></div>Refer to each component's page for its specific configuration options.
Colors & theming
Every component accepts the same four theming attributes on its mount element — they are read centrally, so this works for each data-carpose-component without exception:
data-primary-color
Overrides the primary theme color for this mount
data-secondary-color
Overrides the secondary theme color for this mount
data-accent-color
Overrides the accent theme color for this mount
data-color-scheme
light, dark, or auto (default)
The color values must be hex colors (#31122d); an invalid value is ignored with a console warning and the color configured in your Carposé account settings is used instead. Each override applies only to the component it is set on — other components on the same page keep the account colors.
With data-color-scheme="auto" (or the attribute omitted), the widget follows the host page's theme: the <html> element's data-bs-theme, data-theme, or data-mui-color-scheme attribute, or a light/dark class. The operating system's prefers-color-scheme is intentionally ignored — the widget follows your page, not the visitor's OS. Explicit light or dark pins the scheme.
Components
Display & info components — image and 360° viewers, vehicle sliders, CO2 and consumption labels, wishlist, comparison, the budget calculator, and the floating-buttons overlay
Vehicle search modules — the full search form, compact and AI search, the configurator, types browser, and vehicle groups
Offer modules — promotional offer sliders and detail items
Events — the DOM events components emit, with integration examples, plus the built-in Google Tag Manager bridge and its consent gate
Misc modules — Shadow DOM architecture, URL structure, static form values, stores, and employees
Integrations
Inventory fragment — the inventory as ready-made HTML a CMS plugin or template embeds server-side
React integration — the standard script integration
Wix integration — embedding the vehicle search on Wix via a Custom Element
Model Context Protocol — exposing inventory data to AI assistants (experimental)
Last updated