> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/events/06_offer.md).

# Offer

This page documents every `carpose-offer-*` event dispatched by the Carposé application, covering the Offer Slider and Offer Item components.

All events below are dispatched in the [v2 envelope](/events/01_introduction.md) on `document.body`. Every `offer` event carries the same base payload shape: `{ id, headline, subHeadline }`, with feature-specific fields added on top where noted.

## Select

### Offer Select Event <a href="#offer-select-event" id="offer-select-event"></a>

Dispatched when a user clicks through to view an offer (the "zum Angebot" button).

**Event Name**: `carpose-offer-select`

**Event Data**:

```json
{
  message: "Offer select",
  type: "offer",
  action: "select",
  component: "offer-slider",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-select', function(event) {
  const offer = event.detail.data;

  console.log('Offer selected:', offer.headline);
});
```

## Contact

> **Known limitation:** offer contact is form-only. There is no `carpose-offer-contact-phone`, `carpose-offer-contact-mail` or `carpose-offer-contact-whatsapp` — offers have no associated store, so there is no phone number, email address or WhatsApp number to attribute a click to. If you need channel-specific contact tracking, use the [vehicle contact events](/events/02_vehicle-search.md#contact) on the underlying vehicle instead.

### Offer Contact Form Submit Event <a href="#offer-contact-form-submit-event" id="offer-contact-form-submit-event"></a>

Dispatched when a user submits the offer contact form, before the API call resolves.

**Event Name**: `carpose-offer-contact-form-submit`

**Event Data**:

```json
{
  message: "Offer contact form submit",
  type: "offer",
  feature: "contact",
  action: "form-submit",
  channel: "form",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-contact-form-submit', function(event) {
  const offer = event.detail.data;

  console.log('Contact form submitted for offer:', offer.headline);
});
```

### Offer Contact Form Success Event <a href="#offer-contact-form-success-event" id="offer-contact-form-success-event"></a>

Dispatched when the offer contact form submission succeeds. This is the offer equivalent of the old `carpose-offer-contact` event and the one to use for lead-generation conversions.

**Event Name**: `carpose-offer-contact-form-success`

**Event Data**:

```json
{
  message: "Offer contact form success",
  type: "offer",
  feature: "contact",
  action: "form-success",
  channel: "form",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-contact-form-success', function(event) {
  const offer = event.detail.data;

  console.log('Contact form submitted successfully for offer:', offer.headline);
});
```

### Offer Contact Form Error Event <a href="#offer-contact-form-error-event" id="offer-contact-form-error-event"></a>

Dispatched when the offer contact form submission fails.

**Event Name**: `carpose-offer-contact-form-error`

**Event Data**:

```json
{
  message: "Offer contact form error",
  type: "offer",
  feature: "contact",
  action: "form-error",
  channel: "form",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-contact-form-error', function(event) {
  const offer = event.detail.data;

  console.log('Contact form submission failed for offer:', offer.headline);
});
```

## Test Drive

### Offer Test Drive Open Event <a href="#offer-test-drive-open-event" id="offer-test-drive-open-event"></a>

Dispatched when a user opens the test drive booking dialog for an offer.

**Event Name**: `carpose-offer-test-drive-open`

**Event Data**:

```json
{
  message: "Offer test drive open",
  type: "offer",
  feature: "test-drive",
  action: "open",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-test-drive-open', function(event) {
  const offer = event.detail.data;

  console.log('Test drive booking opened for offer:', offer.headline);
});
```

### Offer Test Drive Submit Event <a href="#offer-test-drive-submit-event" id="offer-test-drive-submit-event"></a>

Dispatched when a user submits the test drive booking form, before the API call resolves.

**Event Name**: `carpose-offer-test-drive-submit`

**Event Data**:

```json
{
  message: "Offer test drive submit",
  type: "offer",
  feature: "test-drive",
  action: "submit",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-test-drive-submit', function(event) {
  const offer = event.detail.data;

  console.log('Test drive booking submitted for offer:', offer.headline);
});
```

### Offer Test Drive Success Event <a href="#offer-test-drive-success-event" id="offer-test-drive-success-event"></a>

Dispatched when a test drive booking succeeds.

**Event Name**: `carpose-offer-test-drive-success`

**Event Data**:

```json
{
  message: "Offer test drive success",
  type: "offer",
  feature: "test-drive",
  action: "success",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen",
    bookingId: "booking-789",
    status: "confirmed"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-test-drive-success', function(event) {
  const { headline, bookingId, status } = event.detail.data;

  console.log('Test drive booked for offer:', headline, bookingId, status);
});
```

### Offer Test Drive Error Event <a href="#offer-test-drive-error-event" id="offer-test-drive-error-event"></a>

Dispatched when a test drive booking fails.

**Event Name**: `carpose-offer-test-drive-error`

**Event Data**:

```json
{
  message: "Offer test drive error",
  type: "offer",
  feature: "test-drive",
  action: "error",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-test-drive-error', function(event) {
  const offer = event.detail.data;

  console.log('Test drive booking failed for offer:', offer.headline);
});
```

## Configurator

### Offer Configurator Open Event <a href="#offer-configurator-open-event" id="offer-configurator-open-event"></a>

Dispatched when a user opens the manufacturer configurator link for an offer.

**Event Name**: `carpose-offer-configurator-open`

**Event Data**:

```json
{
  message: "Offer configurator open",
  type: "offer",
  feature: "configurator",
  action: "open",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen",
    url: "https://configurator.manufacturer.example/model/123"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-configurator-open', function(event) {
  const { headline, url } = event.detail.data;

  console.log('Configurator opened for offer:', headline, url);
});
```

### Offer Configurator Code Copy Event <a href="#offer-configurator-code-copy-event" id="offer-configurator-code-copy-event"></a>

Dispatched when a user copies the manufacturer configurator code for an offer.

**Event Name**: `carpose-offer-configurator-code-copy`

**Event Data**:

```json
{
  message: "Offer configurator code copy",
  type: "offer",
  feature: "configurator",
  action: "code-copy",
  component: "offer-item",
  version: 2,
  data: {
    id: "offer-123",
    headline: "Sommer-Leasingaktion",
    subHeadline: "Jetzt bis zu 20% sparen",
    code: "ABC-123-XYZ"
  }
}
```

**How to Listen**:

```javascript
document.body.addEventListener('carpose-offer-configurator-code-copy', function(event) {
  const { headline, code } = event.detail.data;

  console.log('Configurator code copied for offer:', headline, code);
});
```