> 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/components/11_floating-buttons.md).

# Floating Buttons

{% hint style="info" %}
The floating buttons are a page-level overlay (in a corner of the screen) that gives visitors quick access to actions such as live chat, your custom links, the purchase-request and test-drive wizards, and — where a vehicle search is on the page — wishlist, comparison, history, and the AI assistant.
{% endhint %}

## Overview

The floating-buttons overlay can show:

* **Custom menu entries** — links and grouped buttons that you configure in the Carposé dashboard (label, icon, URL).
* **Live chat** — a chat button backed by Brevo, when enabled for your account.
* **Built-in feature buttons** — wishlist, history, comparison, budget calculator, and the AI assistant, shown according to your account settings and what is present on the page.
* **Wizard buttons** — "Fahrzeug verkaufen" opens the [Purchase Request Form](/components/12_purchase-request-form.md) and "Probefahrt buchen" opens the [Test Drive Form](/components/13_test-drive-form.md), each in a dialog. See [Wizard buttons](#wizard-buttons) below.

What appears in the overlay is configured by the dealer in the Carposé dashboard. On the page you only enable the overlay and, optionally, override the theme colors.

## Adding the overlay

There are two ways to add the overlay to a page.

### Option 1 — from the integration script (recommended)

Add the `data-carpose-floating-buttons` attribute (and your API key) directly to the integration script tag. The overlay is then mounted automatically — no extra element is needed:

```html
<script
  type="text/javascript"
  src="https://integration.carpose.app/integration.js"
  data-carpose-floating-buttons
  data-api-key="your-api-key"
></script>
```

### Option 2 — as a mount element

Like any other component, you can also place an explicit mount `<div>`:

```html
<div
  data-carpose-component="floating-buttons"
  data-api-key="your-api-key"
></div>
```

Only one floating-buttons overlay is shown per page.

## Configuration Attributes

| Attribute                       | Where                | Required       | Default         | Description                                                                                                                   |
| ------------------------------- | -------------------- | -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `data-api-key`                  | script tag / element | Yes            | —               | Your Carposé API key                                                                                                          |
| `data-carpose-floating-buttons` | script tag           | Yes (Option 1) | —               | Its presence mounts the overlay. Set it to `"false"` to force the overlay off (for example on pages where you don't want it). |
| `data-primary-color`            | script tag / element | No             | account default | Override the primary theme color                                                                                              |
| `data-secondary-color`          | script tag / element | No             | account default | Override the secondary theme color                                                                                            |
| `data-accent-color`             | script tag / element | No             | account default | Override the accent theme color                                                                                               |
| `data-color-scheme`             | script tag / element | No             | account default | `"light"` or `"dark"`                                                                                                         |
| `data-purchase-request`         | script tag / element | No             | account default | `"true"` / `"false"` — show the "Fahrzeug verkaufen" button. See [Wizard buttons](#wizard-buttons)                            |
| `data-test-drive`               | script tag / element | No             | `false`         | `"true"` / `"false"` — show the "Probefahrt buchen" button. See [Wizard buttons](#wizard-buttons)                             |

## Wizard buttons

Two of the wizards can be reached from the overlay instead of, or in addition to, an embed of their own. Opened this way they always use their default copy, every optional step switched on, and no success redirect, and they take the privacy link from your account settings — there is no mount element whose attributes they could read.

| Attribute               | Button               | Default              |
| ----------------------- | -------------------- | -------------------- |
| `data-purchase-request` | "Fahrzeug verkaufen" | Your account setting |
| `data-test-drive`       | "Probefahrt buchen"  | Off                  |

Both go on the floating-buttons script tag or element and take `"true"` or `"false"`, overriding the account setting for that page:

```html
<script
  type="text/javascript"
  src="https://integration.carpose.app/integration.js"
  data-carpose-floating-buttons
  data-api-key="your-api-key"
  data-purchase-request="true"
></script>
```

Events from a wizard opened here carry `component: "floating-buttons"` rather than the wizard's own component name.

## Live chat

Live chat is provided through **Brevo**. It is enabled and configured (provider and account ID) by the dealer in the Carposé dashboard. When enabled, a chat button appears in the overlay; clicking it opens the Brevo chat widget. No extra code is required on your side — including the integration script is enough.

## Notes

* Custom menu entries (links and groups) are managed entirely in the Carposé dashboard; only `http://` and `https://` links are allowed.
* The wishlist, comparison, history, budget calculator, and AI assistant buttons appear based on your account settings (and, for some, whether a vehicle search component is on the page). See the [Vehicle Search Form](/vehicle-search-modules/01_vehicle-search-form.md) for those features.