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

# Chat-Widget Übersicht

> Einführung in das Cosmo Chatbot-Widget - eine einbettbare KI-gesteuerte Chat-Oberfläche mit 3D-Avatar-Unterstützung

## Was ist das Chat-Widget?

Das Chat-Widget ist eine einbettbare KI-gesteuerte Chat-Oberfläche, die Sie jeder Website hinzufügen können. Es bietet Ihren Besuchern sofortigen Zugang zu einem KI-Assistenten, der auf Ihrer Wissensdatenbank trainiert wurde.

## Hauptfunktionen

<CardGroup cols={2}>
  <Card title="KI-gesteuerte Konversationen" icon="robot">
    Natürlichsprachliche Konversationen, angetrieben durch Ihren individuell trainierten KI-Agenten.
  </Card>

  <Card title="3D-Avatar" icon="user-robot">
    Interaktiver animierter Charakter mit Lippensynchronisation für gesprochene Antworten.
  </Card>

  <Card title="Mehrsprachige Unterstützung" icon="globe">
    Unterstützung für mehrere Sprachen mit Echtzeit-Übersetzung.
  </Card>

  <Card title="Anpassbares Design" icon="palette">
    Passen Sie Markenfarben, Schriftarten und Stil an.
  </Card>
</CardGroup>

## So funktioniert es

<Steps>
  <Step title="Erstellen Sie Ihren Agenten">
    Richten Sie einen KI-Agenten in Ihrem Arbeitsbereich ein und konfigurieren Sie seine Persönlichkeit und Wissensdatenbank.
  </Step>

  <Step title="Wissensquellen hinzufügen">
    Trainieren Sie Ihren Agenten mit Website-Inhalten, Dokumenten, Frage-Antwort-Paaren oder benutzerdefiniertem Text.
  </Step>

  <Step title="Erscheinungsbild anpassen">
    Konfigurieren Sie die Farben des Widgets, den Avatar, die Willkommensnachricht und die vorgeschlagenen Fragen.
  </Step>

  <Step title="Auf Ihrer Website einbetten">
    Kopieren Sie den Einbettungscode und fügen Sie ihn Ihrer Website hinzu, um Ihren Agenten live zu schalten.
  </Step>
</Steps>

## Widget-Komponenten

Das Chat-Widget besteht aus mehreren Komponenten, die zusammenarbeiten:

| Komponente                | Beschreibung                                                           |
| ------------------------- | ---------------------------------------------------------------------- |
| **Chat-Schaltfläche**     | Schwebende Schaltfläche, die Besucher anklicken, um den Chat zu öffnen |
| **Chat-Panel**            | Hauptgesprächsbereich mit Nachrichteneingabe                           |
| **Avatar-Panel**          | 3D-animierter Charakter (nur Desktop)                                  |
| **Sprachauswahl**         | Oberfläche zum Wechseln der Sprache                                    |
| **Header-Steuerelemente** | Schaltflächen zum Zurücksetzen, Sprachwechsel und Avatar-Umschalten    |

## Plattformunterstützung

| Plattform           | Unterstützungsstufe                                    |
| ------------------- | ------------------------------------------------------ |
| **Desktop-Browser** | Volle Unterstützung einschließlich 3D-Avatar und Audio |
| **Mobile Browser**  | Volles Chat-Erlebnis, kein Avatar-Panel                |
| **Tablets**         | Responsives Design passt sich der Bildschirmgröße an   |

<Note>
  Das 3D-Avatar-Panel ist für Desktop-Bildschirme (ab 800px Breite) optimiert, um das beste visuelle Erlebnis und die beste Leistung zu gewährleisten.
</Note>

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Einbettungsanleitung" icon="code" href="/de/chat-widget/embedding">
    Erfahren Sie, wie Sie das Widget zu Ihrer Website hinzufügen.
  </Card>

  <Card title="Benutzer-Funktionen" icon="sparkles" href="/de/chat-widget/user-features">
    Entdecken Sie die interaktiven Funktionen, die Besuchern zur Verfügung stehen.
  </Card>

  <Card title="Gestaltung" icon="palette" href="/de/customization/styling">
    Passen Sie das Erscheinungsbild des Widgets an.
  </Card>

  <Card title="Widget-Einstellungen" icon="sliders" href="/de/customization/widget">
    Konfigurieren Sie Willkommensnachrichten und Fragen.
  </Card>
</CardGroup>