> ## 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. # Benutzer-Funktionen > Interaktive Funktionen für Besucher des Chat-Widgets, einschließlich Audio-Antworten, Sprachwechsel, Konversations-Reset und 3D-Avatar ## Überblick Das Chat-Widget verfügt über mehrere interaktive Funktionen, die ein ansprechendes und zugängliches Erlebnis für Ihre Website-Besucher schaffen. Diese Funktionen arbeiten zusammen, um ein KI-Konversationserlebnis zu bieten, das sich natürlich und intuitiv anfühlt. Text-to-Speech-Funktion mit lippensynchronisierten Avatar-Animationen. Echtzeit-Sprachwechsel mit automatischer Übersetzung. Starten Sie neue Konversationen mit einem einzigen Klick. Interaktiver animierter Charakter für visuelles Engagement. ## Audio-Antworten (Text-to-Speech) Das Chat-Widget kann KI-Antworten mithilfe von Text-to-Speech-Technologie vorlesen und schafft so ein ansprechenderes und zugänglicheres Erlebnis. Wenn aktiviert, animiert der 3D-Avatar mit Lippensynchronisationsbewegungen, die zum gesprochenen Audio passen. ### Wie Audio funktioniert Wenn das Avatar-Panel geöffnet und Audio aktiviert ist: 1. Die KI generiert eine Textantwort auf die Frage Ihres Besuchers 2. Die Antwort wird an den TTS-Dienst (Text-to-Speech) gesendet 3. Audio wird synthetisiert und über den Browser wiedergegeben 4. Der 3D-Avatar synchronisiert seine Lippen in Echtzeit zum Audio Die Audiowiedergabe wird nur ausgelöst, wenn das Avatar-Panel sichtbar ist. Wenn das Panel geschlossen ist oder die Sprachauswahl anzeigt, bleiben die Antworten rein textbasiert. ### Unterstützte TTS-Anbieter Das Widget unterstützt zwei Text-to-Speech-Anbieter: | Anbieter | Beschreibung | | ------------------- | ------------------------------------------------------------------------------------------------------------- | | **Microsoft Azure** | Hochwertige neuronale Stimmen mit umfangreicher Sprachunterstützung und Visem-Daten für Lippensynchronisation | | **ElevenLabs** | Premium-KI-Stimmen mit natürlicher Intonation und ausdrucksstarker Sprache | ### Audio-Steuerung Das Audio-Verhalten wird auf Widget-Ebene gesteuert: * **Avatar-Panel-Umschalter** - Wenn das Avatar-Panel geöffnet ist, wird Audio automatisch für neue Antworten abgespielt * **Sprechen stoppen** - Das Schließen des Avatar-Panels oder das Starten einer neuen Nachricht stoppt laufendes Audio * **Mobilverhalten** - Audio ist auf Mobilgeräten deaktiviert, um das Erlebnis zu optimieren Konfigurieren Sie TTS-Einstellungen für jede unterstützte Sprache in Ihren Agenteneinstellungen. Verschiedene Sprachen können unterschiedliche Stimmen oder sogar verschiedene Anbieter für optimale Aussprache verwenden. ## Sprachwechsel Das Chat-Widget unterstützt Echtzeit-Sprachwechsel, sodass Besucher in ihrer bevorzugten Sprache interagieren können. Diese Funktion bietet automatische Übersetzung der Oberfläche und der KI-Antworten. ### Zugriff auf die Sprachauswahl **Auf dem Desktop:** 1. Klicken Sie auf das Flaggensymbol im Chat-Header 2. Das Sprachpanel öffnet sich neben dem Chat 3. Wählen Sie Ihre bevorzugte Sprache aus der Liste 4. Das Panel schließt sich automatisch nach der Auswahl **Auf Mobilgeräten:** 1. Tippen Sie auf das Flaggensymbol im Chat-Header 2. Die Sprachliste wird im Vollbildmodus angezeigt 3. Wählen Sie Ihre bevorzugte Sprache 4. Sie kehren zur Chat-Ansicht zurück ### Was übersetzt wird Wenn ein Besucher die Sprache wechselt: | Element | Übersetzungsverhalten | | ------------------------- | ------------------------------------------------------------------------ | | **Willkommensnachricht** | Wird automatisch in die neue Sprache übersetzt | | **Vorgeschlagene Fragen** | Werden übersetzt, um Besuchern Themen zu zeigen | | **Oberflächentext** | Schaltflächen, Platzhalter und Beschriftungen werden sofort aktualisiert | | **KI-Antworten** | Zukünftige Antworten kommen in der ausgewählten Sprache | | **Systemnachrichten** | Die Bestätigung des Sprachwechsels erscheint in der neuen Sprache | Vorherige Konversationsnachrichten bleiben in ihrer Originalsprache. Nur neue Nachrichten und die Willkommensnachricht werden beim Sprachwechsel übersetzt. ### Sprachpersistenz Das Widget merkt sich die Sprachpräferenz Ihres Besuchers: Das Widget erkennt die Browsersprache und verwendet sie, wenn sie aktiviert ist, andernfalls wird die Standardsprache verwendet. Wenn ein Besucher eine Sprache auswählt, wird diese im Browser-Speicher gespeichert. Bei späteren Besuchen lädt das Widget mit der zuvor ausgewählten Sprache. ### Verfügbare Sprachen konfigurieren Steuern Sie, welche Sprachen in der Auswahl angezeigt werden, über die [Lokalisierungseinstellungen](/de/customization/localization) Ihres Agenten: * **Sprachen aktivieren/deaktivieren** - Wählen Sie, welche Sprachen angeboten werden * **Standardsprache festlegen** - Konfigurieren Sie den Fallback für nicht unterstützte Browsersprachen * **Sprachen ausschließen** - Entfernen Sie bestimmte Sprachen vollständig aus der Auswahl Wenn nur eine Sprache aktiviert ist, wird die Sprachschaltfläche im Widget-Header ausgeblendet, um Verwirrung zu vermeiden. ## Konversations-Reset Die Reset-Funktion ermöglicht es Besuchern, jederzeit eine neue Konversation zu starten. Dies löscht den aktuellen Chatverlauf und zeigt eine neue Willkommensnachricht an. ### Verwendung der Reset-Funktion 1. Klicken Sie auf das **Drehen/Aktualisieren-Symbol** im Chat-Header 2. Die Konversation wird sofort gelöscht 3. Eine neue Willkommensnachricht erscheint 4. Der Besucher kann neue Fragen stellen ### Was Reset bewirkt | Aktion | Verhalten | | ------------------------ | ------------------------------------------------------------ | | **Nachrichten** | Alle Chat-Nachrichten werden aus dem Widget gelöscht | | **Sitzungs-ID** | Eine neue Sitzungskennung wird generiert | | **Thread-ID** | Der Konversationsthread wird für neuen Kontext zurückgesetzt | | **Avatar-Zustand** | Laufende Sprache wird gestoppt | | **Eingabefeld** | Eingegebener Text wird gelöscht | | **Willkommensnachricht** | Eine neue Willkommensnachricht wird angezeigt | Die Reset-Funktion ist nützlich, wenn Besucher das Thema komplett wechseln möchten oder wenn sie auf ein Problem gestoßen sind und mit einem sauberen Start neu beginnen möchten. ### Wann Reset verwenden Ermutigen Sie Besucher, Reset zu verwenden, wenn: * Sie nach einem völlig anderen Thema fragen möchten * Die Konversation vom Thema abgekommen ist * Sie die vorgeschlagenen Fragen erneut sehen möchten * Sie verschiedene Anfragen testen ## 3D-Avatar-Panel Das Avatar-Panel bietet einen visuellen Begleiter für Konversationen. Ein animierter 3D-Charakter reagiert auf Interaktionen und schafft ein persönlicheres und ansprechenderes Erlebnis. ### Avatar-Panel-Layout **Desktop-Ansicht:** * Das Avatar-Panel erscheint neben dem Chat-Bereich * Beide Panels sind gleichzeitig sichtbar (800px Gesamtbreite) * Der Avatar animiert während des Sprechens * Sichtbarkeit mit dem Bot-Symbol im Header umschalten **Mobile Ansicht:** * Das Avatar-Panel ist auf Mobilgeräten nicht verfügbar * Mobile Benutzer erhalten das vollständige Chat-Erlebnis ohne Avatar * Dies optimiert Leistung und Bildschirmfläche ### Avatar-Zustände | Zustand | Beschreibung | | ------------- | ------------------------------------------------------------------ | | **Bereit** | Avatar zeigt einen neutralen, bereiten Zustand | | **Laden** | Fortschrittsanzeige wird angezeigt, während Avatar-Assets laden | | **Sprechend** | Avatar synchronisiert Lippen zum Audio mit natürlichen Animationen | | **Fehler** | Fallback-Zustand, wenn der Avatar nicht geladen werden kann | ### Avatar-Laden Der 3D-Avatar benötigt das Laden von Assets (GLB-Modelle, Animationen), wenn der Chat geöffnet wird: Das Widget öffnet sich und beginnt im Hintergrund mit dem Laden der Avatar-Assets. Eine Ladeanzeige zeigt den Fortschritt (0-100%). Nach dem Laden wird der Avatar im Bereit-Zustand angezeigt. Nachfolgende Besuche laden schneller dank Browser-Caching. Avatar-Assets werden erst geladen, wenn das Chat-Widget geöffnet wird, nicht beim Laden der Seite. Dies verhindert unnötigen Bandbreitenverbrauch für Besucher, die den Chat nicht nutzen. ### Steuerung des Avatar-Panels **Ein-/Ausblenden-Umschalter:** * Klicken Sie auf das **Bot-Symbol** im Header, um das Avatar-Panel umzuschalten * Wenn sichtbar: Bot-Symbol erscheint mit einer dezenten Hervorhebung * Wenn ausgeblendet: BotOff-Symbol zeigt an, dass das Panel eingeklappt ist **Panel-Interaktionen:** * Das Schließen des Panels stoppt laufendes Audio * Der Wechsel zur Sprachansicht stoppt ebenfalls Audio * Der Panel-Zustand bleibt während der Sitzung erhalten ## Funktionsvergleich nach Gerät Verschiedene Funktionen sind je nach Gerät verfügbar: | Funktion | Desktop | Mobil | | ------------------------- | ------------------------- | --------------- | | Chat-Oberfläche | Ja | Ja | | Avatar-Panel | Ja | Nein | | Audio/TTS | Ja (bei geöffnetem Panel) | Nein | | Sprachwechsel | Seitenpanel | Vollbildansicht | | Konversation zurücksetzen | Ja | Ja | | Schließen-Schaltfläche | Im Header | Im Header | ## Best Practices * Konfigurieren Sie TTS-Stimmen, die zur Persönlichkeit Ihrer Marke passen * Richten Sie sprachspezifische Stimmen für natürliche Aussprache ein * Testen Sie Audio in allen aktivierten Sprachen vor der Bereitstellung * Aktivieren Sie nur Sprachen, die Ihre Wissensdatenbank gut unterstützen kann * Testen Sie KI-Antworten in jeder aktivierten Sprache * Berücksichtigen Sie regionale Varianten (z.B. brasilianisches Portugiesisch vs. europäisches Portugiesisch) * Wählen Sie einen Avatar, der Ihre Marke angemessen repräsentiert * Berücksichtigen Sie das Erscheinungsbild des Avatars für Ihre Zielgruppe * Testen Sie die Avatar-Ladeleistung bei langsameren Verbindungen * Testen Sie das Chat-Erlebnis auf verschiedenen Mobilgeräten * Überprüfen Sie, ob der Sprachwechsel auf Touchscreens reibungslos funktioniert * Stellen Sie sicher, dass die Schließen-Schaltfläche leicht zugänglich ist ## Nächste Schritte Konfigurieren Sie Willkommensnachrichten und vorgeschlagene Fragen. Richten Sie Sprachen und Übersetzungseinstellungen ein. Passen Sie das visuelle Erscheinungsbild Ihres Widgets an. Erhalten Sie den Einbettungscode für Ihre Website.