> ## Documentation Index
> Fetch the complete documentation index at: https://revolai.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget-Installation

> Installieren Sie das Revol-Chat-Widget auf Ihrer Website

## Schnellinstallation

Fuegen Sie dieses einzelne Skript vor dem schliessenden `</head>`-Tag auf Ihrer Website ein:

```html theme={null}
<script src="https://revol-ai.app/tracker.js"
        data-api-key="YOUR_API_KEY"
        data-company-id="YOUR_COMPANY_ID"
        async>
</script>
```

Dieses Skript uebernimmt sowohl das **Chat-Widget** als auch das **Besucher-Tracking** — kein zusaetzlicher Code erforderlich.

## Konfiguration

| Attribut          | Erforderlich | Beschreibung              |
| ----------------- | ------------ | ------------------------- |
| `data-api-key`    | Ja           | Ihr Widget-API-Schluessel |
| `data-company-id` | Ja           | Ihre Unternehmens-ID      |

<Tip>
  Sie finden Ihren API-Schluessel und Ihre Unternehmens-ID unter **Admin-Panel** → **Allgemeine Einstellungen**.
</Tip>

## Was geladen wird

Das Tracker-Skript fuehrt automatisch folgende Schritte aus:

1. **Tracking initialisieren** — Sitzungen, Seitenaufrufe, Ereignisse
2. **Widget laden** — Chat-Schaltflaeche mit Ihrem individuellen Erscheinungsbild
3. **Module nachladen** — Trigger, Overlays, Rufnummerntausch (nur bei Bedarf)

## Shadow DOM

Das Widget wird innerhalb eines **Shadow DOM**-Containers gerendert, was bedeutet:

* Das CSS Ihrer Website beeinflusst das Widget nicht
* Das CSS des Widgets beeinflusst Ihre Website nicht
* Vollstaendige Stilisolierung

## Single Page Applications (SPA)

Der Tracker erkennt URL-Aenderungen automatisch ueber `pushState`- und `popstate`-Ereignisse. Keine zusaetzliche Konfiguration fuer React-, Vue- oder Angular-Apps erforderlich.