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

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"`                                                                                                         |

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