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

# Widget

> Konfigurieren Sie die Inhalte, Nachrichten und Verhaltenseinstellungen Ihres Chat-Widgets

## Überblick

Die Widget-Konfigurationseinstellungen steuern, was Ihr Chat-Widget anzeigt und wie es sich verhält, wenn Besucher damit interagieren. Dazu gehören die Begrüßungsnachricht, der Header-Titel, vorgeschlagene Fragen und die Position sowie das Symbol der Chat-Bubble.

<Tip>
  Die Widget-Konfiguration funktioniert zusammen mit den [Styling](/de/customization/styling)-Einstellungen. Verwenden Sie Styling, um das Erscheinungsbild (Farben, Themes) zu steuern, und die Widget-Konfiguration, um Inhalte und Verhalten zu steuern.
</Tip>

## Zugriff auf die Widget-Einstellungen

1. Navigieren Sie zu Ihrem Agenten im Dashboard
2. Klicken Sie auf **Bereitstellen** in der Seitenleiste
3. Wählen Sie **Chat-Widget** aus, um auf die Konfigurationsoptionen zuzugreifen

Die Widget-Einstellungen sind in zwei Hauptbereiche unterteilt:

* **Styling-Tab** - Visuelles Erscheinungsbild (behandelt in der [Styling-Dokumentation](/de/customization/styling))
* **Inhalt-Tab** - Nachrichten, Eingabeaufforderungen und Textinhalte (hier behandelt)

## Chat-Bubble-Position

Die Chat-Bubble ist die schwebende Schaltfläche, auf die Besucher klicken, um Ihr Chat-Widget zu öffnen. Sie können sie auf beiden Seiten des Bildschirms positionieren.

### Positionsoptionen

| Position   | Beschreibung                                            |
| ---------- | ------------------------------------------------------- |
| **Rechts** | Bubble erscheint in der unteren rechten Ecke (Standard) |
| **Links**  | Bubble erscheint in der unteren linken Ecke             |

### Position auswählen

Berücksichtigen Sie diese Faktoren bei der Auswahl der Bubble-Position:

<AccordionGroup>
  <Accordion icon="window-maximize" title="Website-Layout">
    Wenn Ihre Website wichtige Inhalte oder Navigation auf einer Seite hat, platzieren Sie die Bubble auf der gegenüberliegenden Seite, um Verdeckungen zu vermeiden.
  </Accordion>

  <Accordion icon="comment" title="Vorhandene Chat-Tools">
    Wenn Sie andere Chat-Tools oder Support-Widgets haben, positionieren Sie Ihre Bubble abseits davon, um Verwechslungen zu vermeiden.
  </Accordion>

  <Accordion icon="hand-pointer" title="Call-to-Action-Schaltflächen">
    Vermeiden Sie es, die Bubble in der Nähe anderer schwebender Elemente wie Scroll-nach-oben-Schaltflächen oder Werbebanner zu platzieren.
  </Accordion>

  <Accordion icon="mobile-screen" title="Mobile Überlegungen">
    Testen Sie beide Positionen auf mobilen Geräten. Die untere rechte Ecke ist üblich, aber die linke Positionierung kann bei einigen mobilen Layouts besser funktionieren.
  </Accordion>
</AccordionGroup>

Um die Position zu ändern:

1. Navigieren Sie zum **Styling**-Tab in den Chat-Widget-Einstellungen
2. Scrollen Sie zum Abschnitt **Chat-Bubble**
3. Wählen Sie entweder die Position **Links** oder **Rechts**
4. Überprüfen Sie die Änderung im Live-Vorschau-Panel
5. Klicken Sie auf **Änderungen speichern**

## Benutzerdefiniertes Chat-Symbol

Ersetzen Sie das Standard-Chat-Bubble-Symbol durch Ihr eigenes benutzerdefiniertes Bild, passend zu Ihrer Marke.

### Benutzerdefiniertes Symbol aktivieren

1. Navigieren Sie zum **Styling**-Tab
2. Suchen Sie den Abschnitt **Chat-Bubble**
3. Aktivieren Sie **Chat-Symbol**, um den Upload eines benutzerdefinierten Symbols zu ermöglichen
4. Klicken Sie auf **Hochladen**, um ein Bild von Ihrem Gerät auszuwählen

### Symbol-Anforderungen

| Anforderung          | Spezifikation                   |
| -------------------- | ------------------------------- |
| **Formate**          | PNG, JPG, SVG                   |
| **Empfohlene Größe** | 48x48 Pixel oder größer         |
| **Seitenverhältnis** | Quadratisch (1:1) empfohlen     |
| **Dateigröße**       | Unter 100KB für schnelles Laden |

<Warning>
  Wenn Sie den Schalter für das benutzerdefinierte Symbol deaktivieren, kehrt das Widget zum Standard-Chat-Symbol zurück. Ihr hochgeladenes Bild wird beibehalten und erscheint wieder, wenn Sie den Schalter erneut aktivieren.
</Warning>

### Best Practices für Symbole

* Verwenden Sie ein einfaches, erkennbares Symbol, das auch in kleinen Größen funktioniert
* Stellen Sie sicher, dass das Symbol einen guten Kontrast zur Bubble-Hintergrundfarbe hat
* Testen Sie Ihr Symbol sowohl auf hellen als auch auf dunklen Website-Hintergründen
* Erwägen Sie die Verwendung Ihres Logos oder eines benutzerdefinierten Chat-bezogenen Symbols

## Header-Titel

Der Header-Titel erscheint oben im Chat-Widget, wenn es geöffnet ist. Er hilft Besuchern zu verstehen, mit wem oder was sie chatten.

### Header-Titel festlegen

1. Navigieren Sie zum **Inhalt**-Tab in den Chat-Widget-Einstellungen
2. Suchen Sie das Feld **Header-Titel**
3. Geben Sie Ihren gewünschten Titel ein (z.B. "Chat mit dem Support", "Fragen Sie unseren Assistenten")
4. Speichern Sie Ihre Änderungen

### Beispiele für Header-Titel

| Anwendungsfall     | Beispieltitel               |
| ------------------ | --------------------------- |
| Kundensupport      | "Support-Chat"              |
| Vertriebsassistent | "Mit dem Vertrieb sprechen" |
| Allgemeine Hilfe   | "Wie können wir helfen?"    |
| Markenorientiert   | "Chat mit \[Markenname]"    |
| Produktspezifisch  | "\[Produkt]-Assistent"      |

<Note>
  Wenn kein Header-Titel festgelegt ist, zeigt das Widget einen Standardtitel an. Das Festlegen eines benutzerdefinierten Titels schafft ein persönlicheres Erlebnis für Besucher.
</Note>

## Begrüßungsnachricht

Die Begrüßungsnachricht ist das Erste, was Besucher sehen, wenn sie das Chat-Widget öffnen. Sie setzt den Ton für das Gespräch und hilft Besuchern zu verstehen, wie sie beginnen können.

### Begrüßungsnachricht konfigurieren

1. Navigieren Sie zum **Inhalt**-Tab
2. Suchen Sie das Feld **Begrüßungsnachricht**
3. Geben Sie Ihre Nachricht im Textbereich ein
4. Überprüfen Sie in der Live-Vorschau, wie sie erscheint
5. Speichern Sie Ihre Änderungen

### Effektive Begrüßungsnachrichten verfassen

<CardGroup cols={2}>
  <Card title="Freundlich sein" icon="face-smile">
    Verwenden Sie einen warmen, zugänglichen Ton, der Besucher dazu einlädt, Fragen zu stellen.
  </Card>

  <Card title="Klar sein" icon="bullseye">
    Lassen Sie Besucher wissen, welche Art von Hilfe sie erwarten können und bei welchen Themen der Agent unterstützen kann.
  </Card>

  <Card title="Kurz sein" icon="compress">
    Halten Sie die Nachricht prägnant. Lange Begrüßungsnachrichten können überwältigend sein und werden möglicherweise übersprungen.
  </Card>

  <Card title="Handlungsorientiert sein" icon="hand-pointer">
    Ermutigen Sie Besucher, ihre erste Frage zu stellen, oder leiten Sie sie zu häufigen Themen weiter.
  </Card>
</CardGroup>

### Beispiele für Begrüßungsnachrichten

**Kundensupport:**

```
Hallo! Ich bin hier, um Ihnen bei Fragen zu Ihrem Konto, Bestellungen oder unseren Produkten zu helfen. Womit kann ich Ihnen heute behilflich sein?
```

**Vertriebsassistent:**

```
Willkommen! Ich kann Ihnen helfen, die richtige Lösung für Ihre Bedürfnisse zu finden. Fragen Sie gerne nach Preisen, Funktionen oder fordern Sie eine Demo an.
```

**Dokumentations-Helfer:**

```
Hallo! Ich kann Ihnen helfen, unsere Dokumentation zu durchsuchen und technische Fragen zu beantworten. Was möchten Sie wissen?
```

## Vorgeschlagene Nachrichten

Vorgeschlagene Nachrichten (auch Schnellantworten oder Starter-Eingabeaufforderungen genannt) erscheinen als anklickbare Schaltflächen, mit denen Besucher schnell ein Gespräch beginnen können. Sie reduzieren Hürden und helfen Besuchern, die möglicherweise nicht wissen, was sie fragen sollen.

### Vorgeschlagene Nachrichten hinzufügen

1. Navigieren Sie zum **Inhalt**-Tab
2. Suchen Sie den Abschnitt **Vorgeschlagene Nachrichten**
3. Klicken Sie auf **Hinzufügen**, um eine neue vorgeschlagene Nachricht zu erstellen
4. Geben Sie den Nachrichtentext ein
5. Wiederholen Sie den Vorgang für weitere Nachrichten
6. Ziehen Sie zum Neuordnen, falls nötig
7. Speichern Sie Ihre Änderungen

### Vorgeschlagene Nachrichten verwalten

| Aktion         | Vorgehensweise                                                                   |
| -------------- | -------------------------------------------------------------------------------- |
| **Hinzufügen** | Klicken Sie auf die Schaltfläche **Hinzufügen** und geben Sie Ihre Nachricht ein |
| **Bearbeiten** | Klicken Sie auf eine vorhandene Nachricht, um den Text zu ändern                 |
| **Entfernen**  | Klicken Sie auf die **X**-Schaltfläche neben einer Nachricht, um sie zu löschen  |
| **Neuordnen**  | Ziehen Sie Nachrichten per Drag-and-Drop, um die Anzeigereihenfolge zu ändern    |

### Best Practices für vorgeschlagene Nachrichten

<Steps>
  <Step title="Anzahl begrenzen">
    Verwenden Sie 2-4 vorgeschlagene Nachrichten. Zu viele Optionen können Besucher überfordern und den gegenteiligen Effekt erzielen.
  </Step>

  <Step title="Häufige Themen abdecken">
    Wählen Sie Nachrichten, die Ihre am häufigsten gestellten Fragen oder typischen Besucherbedürfnisse ansprechen.
  </Step>

  <Step title="Kurz halten">
    Vorgeschlagene Nachrichten sollten kurz und übersichtlich sein - idealerweise unter 50 Zeichen.
  </Step>

  <Step title="Handlungsorientiert formulieren">
    Formulieren Sie Nachrichten als Fragen oder Anfragen, auf die der Agent direkt antworten kann.
  </Step>
</Steps>

### Beispiele für vorgeschlagene Nachrichten

**E-Commerce:**

* "Welche Versandoptionen gibt es?"
* "Wie kann ich einen Artikel zurücksenden?"
* "Meine Bestellung verfolgen"
* "Mit einem Mitarbeiter sprechen"

**SaaS-Produkt:**

* "Welche Funktionen sind enthalten?"
* "Wie funktioniert die Preisgestaltung?"
* "Demo ansehen"
* "Hilfe zu meinem Konto"

**Support-Portal:**

* "Passwort zurücksetzen"
* "Fragen zur Abrechnung"
* "Technischer Support"
* "Funktionswunsch"

## Konfigurationsreferenz

### Standardwerte

| Einstellung                | Standardwert                       |
| -------------------------- | ---------------------------------- |
| Chat-Bubble-Position       | Rechts                             |
| Benutzerdefiniertes Symbol | Deaktiviert                        |
| Header-Titel               | Nicht gesetzt (verwendet Standard) |
| Begrüßungsnachricht        | Nicht gesetzt (verwendet Standard) |
| Vorgeschlagene Nachrichten | Leer                               |

### Zeichenlimits

| Feld                     | Empfohlenes Limit        |
| ------------------------ | ------------------------ |
| Header-Titel             | 30 Zeichen               |
| Begrüßungsnachricht      | 200 Zeichen              |
| Vorgeschlagene Nachricht | 50 Zeichen pro Nachricht |

<Note>
  Dies sind empfohlene Limits für eine optimale Darstellung. Längerer Text kann abgeschnitten werden oder Layout-Probleme auf kleineren Bildschirmen verursachen.
</Note>

## Vorschau und Testen

Überprüfen Sie immer Ihre Widget-Konfigurationsänderungen vor dem Speichern in der Vorschau:

1. Nehmen Sie Ihre Änderungen im Konfigurationspanel vor
2. Beobachten Sie die Live-Vorschau auf der rechten Seite des Bildschirms
3. Testen Sie sowohl in der Desktop- als auch in der Mobilansicht, falls verfügbar
4. Klicken Sie auf **Änderungen speichern**, wenn Sie zufrieden sind

<Tip>
  Verwenden Sie den [Playground](/de/agents/playground), um zu testen, wie Ihr Agent auf die vorgeschlagenen Nachrichten reagiert, und überprüfen Sie, ob der Gesprächsablauf gut mit Ihrer konfigurierten Begrüßungsnachricht funktioniert.
</Tip>

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Styling & Erscheinungsbild" icon="palette" href="/de/customization/styling">
    Passen Sie Farben, Themes und das visuelle Erscheinungsbild Ihres Widgets an.
  </Card>

  <Card title="Lokalisierung" icon="globe" href="/de/customization/localization">
    Konfigurieren Sie Spracheinstellungen für internationale Besucher.
  </Card>

  <Card title="Widget bereitstellen" icon="code" href="/de/agents/deployment">
    Holen Sie sich den Einbettungscode und fügen Sie Ihr konfiguriertes Widget zu Ihrer Website hinzu.
  </Card>

  <Card title="Konversationen" icon="messages" href="/de/agents/conversations">
    Überwachen Sie Chat-Konversationen und Besucherinteraktionen.
  </Card>
</CardGroup>