Ü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.Audio-Antworten
Text-to-Speech-Funktion mit lippensynchronisierten Avatar-Animationen.
Sprachwechsel
Echtzeit-Sprachwechsel mit automatischer Übersetzung.
Konversations-Reset
Starten Sie neue Konversationen mit einem einzigen Klick.
3D-Avatar
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:- Die KI generiert eine Textantwort auf die Frage Ihres Besuchers
- Die Antwort wird an den TTS-Dienst (Text-to-Speech) gesendet
- Audio wird synthetisiert und über den Browser wiedergegeben
- 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
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:- Klicken Sie auf das Flaggensymbol im Chat-Header
- Das Sprachpanel öffnet sich neben dem Chat
- Wählen Sie Ihre bevorzugte Sprache aus der Liste
- Das Panel schließt sich automatisch nach der Auswahl
- Tippen Sie auf das Flaggensymbol im Chat-Header
- Die Sprachliste wird im Vollbildmodus angezeigt
- Wählen Sie Ihre bevorzugte Sprache
- 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:Erstmaliges Laden
Das Widget erkennt die Browsersprache und verwendet sie, wenn sie aktiviert ist, andernfalls wird die Standardsprache verwendet.
Manuelle Auswahl
Wenn ein Besucher eine Sprache auswählt, wird diese im Browser-Speicher gespeichert.
Verfügbare Sprachen konfigurieren
Steuern Sie, welche Sprachen in der Auswahl angezeigt werden, über die Lokalisierungseinstellungen 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
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
- Klicken Sie auf das Drehen/Aktualisieren-Symbol im Chat-Header
- Die Konversation wird sofort gelöscht
- Eine neue Willkommensnachricht erscheint
- 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 |
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
- 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:Chat wird geöffnet
Das Widget öffnet sich und beginnt im Hintergrund mit dem Laden der Avatar-Assets.
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
- 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
Audio-Erlebnis
Audio-Erlebnis
- 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
Sprachunterstützung
Sprachunterstützung
- 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)
Avatar-Nutzung
Avatar-Nutzung
- 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
Mobile Optimierung
Mobile Optimierung
- 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