Test Drive Booking
Overview
The wizard has three steps:
Fahrzeug — a tile grid of every vehicle in your test-drive fleet, each with its photo and name. The visitor picks one.
Termin — the days that still have free slots for that vehicle, and the free times on the chosen day. The first bookable day is preselected, and the expected duration is shown next to the times.
Kontakt — salutation, first and last name, e-mail, optional phone number and message, and the privacy consent checkbox.
First name, last name, a valid e-mail address and the consent checkbox are mandatory; everything else is optional.
Availability is loaded per vehicle from your fleet's real calendar, so a visitor only ever sees times that are genuinely free. If someone books a slot while another visitor is filling in the form, the second visitor is returned to the appointment step with a refreshed list of times rather than losing what they typed.
A new booking is created with the status pending — it is a request, not a confirmed appointment. The visitor sees a summary of the vehicle, date and time, plus a note that you will confirm by e-mail.
Adding the wizard
Option 1 — inline
<div
data-carpose-component="test-drive-form"
data-api-key="your-api-key"
data-privacy-url="https://your-site.de/datenschutz"
></div>Option 2 — behind a button
Option 3 — from the floating buttons
The wizard can also open from the floating-buttons overlay as a "Probefahrt buchen" button. Put data-test-drive="true" on the floating-buttons script tag or element to switch it on for a page — see Wizard buttons.
Opened this way the wizard uses its default copy and takes the privacy link from your account settings, since there is no mount element to read attributes from.
Configuration Attributes
data-api-key
Yes
—
Your Carposé API key
data-variant
No
inline
inline renders the wizard in place; modal renders a button that opens it in a dialog
data-title
No
Probefahrt buchen
Headline above the wizard
data-subtitle
No
Wählen Sie ein Fahrzeug und einen Termin — wir bestätigen Ihnen die Probefahrt.
Intro line. Set it to an empty value (data-subtitle="") to hide it — that is different from omitting the attribute, which keeps the default
data-button-label
No
Probefahrt buchen
Caption of the trigger button, for data-variant="modal". Note this falls back to the built-in default, not to your data-title — set both if you want a custom caption on the button as well
data-success-url
No
—
Redirect here after a successful booking instead of showing the confirmation. Only http:// and https:// URLs are accepted
data-privacy-url
No
—
Target of the link in the privacy consent checkbox. Only http:// and https:// URLs are accepted
Your fleet
The vehicles shown are the active vehicles in your test-drive fleet, managed in the Carposé dashboard — this is a separate list from your vehicle inventory. Their photos and booking calendars come from the same place.
Two states are worth knowing, because neither is an error:
No vehicles at all — the wizard says that no cars are currently available for a test drive. Check that your fleet has at least one active vehicle.
A vehicle with no free slots — picking it reaches the appointment step and reports that no dates are currently available. The visitor can go back and choose another car.
If the fleet itself cannot be loaded, the wizard shows an error with a retry button.
Events
The wizard dispatches carpose-vehicle-test-drive-* events for open, step, submit, success and error. See Vehicle Search events for the payloads.
Notes
All wizard copy is German.
The wizard renders inside a Shadow DOM, so your page styles cannot affect it and its styles cannot leak out. It does inherit your page's font family on purpose, so it blends into your typography. See Shadow DOM Architecture.
This is the standalone fleet wizard. Booking a test drive for one specific vehicle from an offer page is a separate flow — see Offer Item.
More than one test-drive wizard can be placed on the same page — for example an inline one and a modal trigger.
Last updated