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

# Web-Widget-Konfiguration

> In diesem Abschnitt erfahren Sie, wie Sie das Web-Widget von Lovi integrieren und anpassen, damit es perfekt zum Design und zur Funktionalität Ihrer Website passt

<img src="https://mintcdn.com/lovi/O5wVbHgTE_jPQc6B/images/WidgetsList.png?fit=max&auto=format&n=O5wVbHgTE_jPQc6B&q=85&s=6975ebc2214376c1e59e012e4bf9a0ef" alt="Web Widget List" width="1682" height="479" data-path="images/WidgetsList.png" />

Dies ist die Brücke zwischen Ihrem cleveren Agenten und Ihren Website-Besuchern.

Das **Web-Widget** ist die freundliche kleine Blase in der Ecke des Bildschirms, die "Hallo!" sagt. Die Integration ist kinderleicht: Sie fügen einfach einen Code-Schnipsel auf Ihrer Seite ein, und voilà! Ihr KI-Agent ist bereit, rund um die Uhr zu chatten, ohne dass Sie einen Finger rühren müssen.

### 🎛️ Übersicht Ihrer Widgets

Dies ist Ihre Widget-Kommandozentrale. Hier sehen Sie jede Chat-Blase, die Sie erstellt haben.

* **Warum mehr als eines?** Sie möchten vielleicht einen "Verkaufs-Bot" für Ihre Preisseite und einen "Tech-Support"-Bot für Ihr Hilfecenter. Hier verwalten Sie alle.
* **Wichtige Aktionen pro Widget:**
  * **📋 Skript kopieren:** Den magischen Code zum Einfügen auf Ihrer Website kopieren.
  * **⚙️ Konfigurieren:** Der spaßige Teil. Farben, Nachrichten und Verhalten anpassen (dazu gleich mehr).
  * **🗑️ Löschen:** Entfernen, wenn Sie es nicht mehr brauchen.

***

### 🎨 Ihr Widget anpassen (Die Kunststunde)

Klicken Sie auf das **Zahnrad-Symbol ⚙️**, um in das Konfigurationslabor zu gelangen. Machen wir dieses Widget zu Ihrem eigenen.

#### 1. Die Grundlagen

* **KI-Agent:** Welches Gehirn betreibt diesen Chat? Wählen Sie einen Ihrer Agenten aus der Liste.
* **Sprachen:** Spricht Ihre Seite Deutsch, Englisch und Französisch? Sagen Sie es dem Widget, damit es nicht dumm aussieht.

#### 2. Schwebende Nachricht (Der Haken 🪝)

Lassen Sie Ihren Bot nicht verstecken! Setzen Sie eine einprägsame Nachricht, die über dem Symbol erscheint.

* *Langweilig:* "Hier chatten."
* *Besser:* "Hallo! Brauchen Sie Hilfe bei Ihrer Bestellung? 👋"

> **⚠️ Achtung:** Fügen Sie Übersetzungen für alle Ihre Sprachen hinzu. Sie wollen nicht, dass englischsprachige Besucher eine leere Blase sehen!

#### 3. Look & Feel (Schick machen)

* **Header:** Wählen Sie, was oben angezeigt wird. Nur ein Titel? Ihr Logo? Ein Avatar eines Roboters mit Monokel? Es liegt an Ihnen.
* **Farben:** Verwenden Sie das Pipetten-Tool 🖊️, um Ihre Marke **genau** abzubilden.
  * *Hauptfarbe:* Die Nachrichtenblasen und der Sende-Button.
  * *Textfarbe:* Stellen Sie sicher, dass sie lesbar ist! Gelber Text auf weißem Hintergrund ist ein Verbrechen an den Augen.

#### 4. Der Pförtner: Datenerfassungsformulare 📝

Möchten Sie wissen, mit wem Sie sprechen, *bevor* sie chatten? Aktivieren Sie das **Formular**.

* Fragen Sie nach **Name, E-Mail oder Telefon**.
* Machen Sie Felder "Pflicht", wenn Sie streng sind, oder "Optional", wenn Sie entspannt sind.
* **DSGVO / Datenschutz:** Fügen Sie einen Link zu Ihrer Richtlinie hinzu, damit Sie rechtskonform bleiben. 👮‍♂️

#### 5. Intelligente Datenerfassung (Erweitert 🤓)

Das ist für die Technik-Profis. Das Widget kann in die Daten Ihrer Website (`localStorage`) schauen, um zu sehen, ob der Nutzer bereits eingeloggt ist.

* **Wie es hilft:** Wenn eingeloggt, kann das Widget *"Hallo, Max!"* sagen, anstatt erneut nach dem Namen zu fragen.
* **Konfiguration:** Sie sagen uns den "Schlüssel" (z. B. `user_email`) und wir holen den Wert automatisch.

***

### 🛠️ Extra-Anpassungen & Layout

Feinjustierung des Erlebnisses:

* **Position:** Links oder Rechts? (Rechts ist Standard, Links für Rebellen).
* **Vollbild:** Soll der Chat den ganzen mobilen Bildschirm einnehmen? Schalten Sie dies AN.
* **Einbetten (DOM-Element):** Anstelle einer schwebenden Blase den Chat permanent in ein `<div>` auf Ihrer Seite einbetten. Ideal für "Kontakt"-Seiten.
* **Benutzerdefiniertes CSS:** Wenn Sie Code können, schreiben Sie hier Ihre eigenen Styles, um unsere zu überschreiben. Keine Grenzen.

***

### 🎨 Benutzerdefiniertes CSS — Der Designer-Leitfaden

Sind die voreingestellten Farben und Optionen zu einschränkend? Das Feld **Benutzerdefiniertes CSS** gibt Ihnen die volle Kontrolle über das Aussehen des Widgets. Hier können Sie CSS-Regeln schreiben, die Stile anpassen, Standardklassen überschreiben oder sogar Animationen hinzufügen.

**Wo Sie es finden:** Öffnen Sie die Widget-Konfiguration (Symbol ⚙️), klappen Sie den Abschnitt **„Benutzerdefiniertes CSS"** auf und geben Sie Ihren Code in das Textfeld ein.

#### ⚙️ So funktioniert es unter der Haube

Was Sie hier schreiben, ist keine Magie — es ist ziemlich vorhersehbar, wenn man es verstanden hat:

1. Ihr CSS wird zusammen mit der Widget-Konfiguration gespeichert.
2. Wenn das Widget auf der Website des Besuchers geladen wird, wird Ihr CSS als `<style>`-Tag **innerhalb des Widgets selbst** eingefügt.
3. Es wird **nach** unseren Standardstilen geladen, sodass Ihre Regeln das letzte Wort haben (sie gewinnen bei Gleichstand).

> **🎯 Wichtig — Geltungsbereich:** Benutzerdefiniertes CSS **wirkt sich nur auf das Innere des Widget-Chats aus**, nicht auf den Rest Ihrer Webseite. Sie können damit nicht Ihre Website umgestalten, nur das Widget. Und umgekehrt: Die Stile Ihrer Website dringen nicht in das Widget ein, Sie beginnen also mit einer sauberen Leinwand.

> **💪 Meine Regel greift nicht?** Da unsere Basisstile spezifisch sind, „steht es manchmal unentschieden" und Ihre Regel gewinnt nicht. Wenn eine Änderung keine Wirkung zeigt, fügen Sie `!important` am Ende der Eigenschaft hinzu (z. B. `border-radius: 0 !important;`) oder verwenden Sie einen spezifischeren Selektor.

#### 🧩 Selektoren, die Sie verwenden können

Dies sind die echten „Etiketten" der Widget-Teile. Zielen Sie mit Ihrem CSS auf sie:

| Selektor                                            | Was es ist                                                                            |
| --------------------------------------------------- | ------------------------------------------------------------------------------------- |
| `.widget_chat`                                      | Der Wurzelcontainer des gesamten Widgets                                              |
| `.widget_chat_window`                               | Das Chat-Fenster, wenn es geöffnet ist                                                |
| `.widget_chat_window_header`                        | Die obere Kopfzeile (Avatar, Titel, Buttons)                                          |
| `.widget_chat_window_body`                          | Der Bereich, in dem Nachrichten erscheinen                                            |
| `.widget_row_message`                               | Jede Nachrichtenzeile (verwenden Sie `.widget_row_message_end` für die des Benutzers) |
| `.widget_message_bot`                               | Die Nachrichtenblasen des Agenten                                                     |
| `.widget_message_content`                           | Der Text in jeder Blase                                                               |
| `.widget_message_botones` / `.widget_message_boton` | Die Schnellantwort-Buttons                                                            |
| `.widget_chat_window_footer`                        | Die untere Leiste, in der man schreibt                                                |
| `#inputMessage`                                     | Das Texteingabefeld für die Nachricht                                                 |
| `.widget_form_submit`                               | Der Senden-Button                                                                     |
| `.widget_chat_formulario`                           | Das Datenerfassungsformular (Name, E-Mail usw.)                                       |
| `.widget_chat_formulario_body_input_asterisk`       | Das rote Sternchen bei Pflichtfeldern                                                 |
| `.widget_chat_window_footer_legends`                | Die Signatur „Generated by lovi.ai" in der Fußzeile                                   |

#### 💡 Praktische Beispiele

**Eckigere Bot-Blasen mit Schatten:**

```css theme={null}
.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
```

**Den Nachrichtentext vergrößern:**

```css theme={null}
.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}
```

**Kopfzeile mit einem Marken-Verlauf:**

```css theme={null}
.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}
```

**Dem Schreibbereich mehr Luft geben:**

```css theme={null}
.widget_chat_window_footer {
  padding: 14px !important;
}
```

> **🧪 Testen Sie es immer im Playground** (siehe unten), bevor Sie veröffentlichen. Ein vergessenes `}` kann mehrere Stile auf einmal zerstören.

***

### 🧪 Testfahrt (Playground)

Bevor Sie den Code auf Ihrer Live-Seite einfügen, machen Sie eine Probefahrt im **Playground**.

* Kollidieren die Farben?
* Ist der Agent höflich?
* Funktioniert das Formular?

**Wenn Sie zufrieden sind, kopieren Sie das Skript und gehen Sie live! 🚀**