Das Chat-Widget ist die Oberfläche, über die Nutzer:innen mit dem KI-Chatbot sprechen. Wie es auf der Webseite erscheint, welche Beschriftungen es zeigt und welche Funktionen darin zur Verfügung stehen, wird im Widget-Editor festgelegt.
Im Fokus stehen die Einstellungen, die das Verhalten und die Texte des Chat-Widgets steuern: die Darstellung des geschlossenen Widgets, alle anpassbaren Beschriftungen, das Zurücksetzen einer Unterhaltung und die Spracheingabe. Reine Designfragen wie Avatar und Farben sind im Artikel Überblick zur visuellen Darstellung beschrieben.
- Allgemeines
- Darstellung des Widgets
2.1 Button Modus
2.2 Input-Bar Modus - Texte und Beschriftungen anpassen
3.1 Name, Titel und Platzhalter
3.2 Hinweis auf ungelesene Nachrichten
3.3 Automatische Übersetzung
3.4 Systemmeldungen des Livechats - Unterhaltung neustarten
- Spracheingabe
- KI-Indikator für generierte Antworten
- Weitere Artikel zum Chat-Widget
1. Allgemeines
Der Zugriff erfolgt im moinAI Hub über den Pfad Widget & Teaser > Widget Darstellung. Der Editor ist zweigeteilt: Links steht eine Live-Vorschau des Chat-Widgets, rechts stehen die Einstellungen, gegliedert in Bereiche wie Name & Avatar, Elemente anpassen, Spracheingabe oder Automatische Übersetzung. Jede Änderung ist sofort in der Vorschau sichtbar.
Zwei Punkte gelten für alle folgenden Kapitel:
- Die Einstellungen gelten pro Kanal. Ein KI-Chatbot, der auf mehreren Webseiten oder in mehreren Sprachen ausgespielt wird, kann je Kanal unterschiedliche Beschriftungen und Funktionen erhalten.
- Änderungen werden erst nach einem Klick auf Veröffentlichen für echte Unterhaltungen wirksam. Vorher sind sie ausschließlich in der Vorschau sichtbar.
Der Widget-Editor deckt ab, was sich ohne Code festlegen lässt. Sind darüber hinaus individuelle Anpassungen nötig, etwa das Aus- und Einblenden des gesamten Chat-Widgets einschließlich seines Symbols, führt der Weg über die JS-API. Diese ist im Artikel zur Steuerung und technischen Anpassung des Chat-Widgets beschrieben.
2. Darstellung des Widgets
Bevor Nutzer:innen das Chat-Widget öffnen, erscheint es in einer von zwei Darstellungen. Die Auswahl erfolgt im Bereich Elemente anpassen im Abschnitt Input-Bar Modus über die beiden Schaltflächen Button Modus und Input-Bar Modus.
| Darstellung | Erscheinungsbild | Geeignet für |
|---|---|---|
| Button Modus (Standard) |
Ein runder Chat-Button mit Sprechblasen-Symbol am unteren Rand der Webseite.
|
Webseiten, auf denen das Chat-Widget verfügbar, aber zurückhaltend sein soll. |
| Input-Bar Modus (Inline-Input-Bar) |
Eine Eingabezeile am unteren Rand der Webseite, in die direkt getippt werden kann. |
Webseiten mit viel Inhalt im unteren Bereich und für Auftritte, die ein stärker sichtbares Chat-Widget ohne zusätzlichen Button bevorzugen. Die Eingabezeile integriert sich in die Seite und benötigt weniger zusätzlichen Platz. |
2.1 Button Modus
Im Button Modus legt die Einstellung Ausrichtung fest, an welcher Seite sich der Chat-Button befindet: Unten links oder Unten rechts. Voreingestellt ist unten rechts. Daneben lassen sich die Farbe des Buttons und seine Helligkeit einstellen. Das Ergebnis der automatischen Kontrastprüfung wird direkt daneben angezeigt. Diese Designoptionen sind im Artikel zu Farben im Widget-Editor näher beschrieben.
Nach einem Klick auf Veröffentlichen wird die Einstellung gespeichert und sofort wirksam.
Soll der Chat-Button auf einzelnen Unterseiten an einer anderen Stelle stehen oder einem manuellen Teaser ausweichen, genügt die Ausrichtung im Editor nicht. Beide Fälle sind über die JS-API lösbar und im Artikel zur technischen Steuerung des Chat-Widgets beschrieben.
Position des geöffneten Widgets im Button Modus
Nutzer:innen können die Position des Widgets nicht ändern. Im geöffneten Zustand erscheint das Widget auf der eingestellten Seite und lässt sich nicht verschieben. Eine individuelle Anpassung der Position bietet eine JS-API-Funktion, über die Steuerungsoptionen zur Verfügung stehen. Mehr dazu ist im Artikel zur technischen Anpassung und Steuerung des Widgets beschrieben.
2.2 Input-Bar Modus
Die Eingabezeile des Input-Bar Modus erscheint mittig am unteren Rand der Webseite und wird, anders als der Button-Modus, nicht geschlossen seitlich ausgerichtet. Geöffnet lässt sich das Widget in diesem Modus durchaus verschieben. Im Input-Bar Modus besteht der geschlossene Widget aus unten nach oben gesehen aus 3 Teilen: dem Text-Eingabefeld für die Nutzer:innen, dem Teaser und dem Banner.
Der Input-Bar Modus bringt für den Banner eigene Gestaltungsfelder mit:
- Banner-Text: Die Ansprache, die in der geschlossenen Eingabezeile steht, zum Beispiel „Wie kann ich dir helfen?“
- Banner-Farbverlauf Start und Banner-Farbverlauf Ende: Zwei Farbwerte, zwischen denen der Hintergrund verläuft.
- Banner-Buttons: Über Button hinzufügen lassen sich Schaltflächen ergänzen, die als Handlungsaufforderung auf einen Link führen. Die Button-Beschriftung legt den sichtbaren Text fest, die Button-URL den hinterlegten Link und der Button-Stil definiert, wie der Link grafisch dargestellt wird. Zur Auswahl stehen Link, Primär und Sekundär.
Läuft bereits eine Unterhaltung, zeigt die geschlossene Eingabezeile statt des Banner-Textes den Hinweis „Unterhaltung fortsetzen“.
Nach einem Klick auf Veröffentlichen wird die Einstellung gespeichert und sofort wirksam.
Position des geöffneten Widgets im Input-Bar Modus
In der Kopfzeile des geöffneten Chat-Widgets steht für Nutzer:innen standardmäßig eine Funktion zur Neupositionierung zur Verfügung. Diese Funktion wird nur im Input-Bar Modus angezeigt. Damit können Nutzer:innen das Chat-Widget flexibel verschieben, falls Inhalte auf der Webseite verdeckt werden.
Zur Auswahl stehen dabei stets die beiden Positionen, an denen sich das Chat-Widget aktuell nicht befindet:
- Widget mittig platziert: Es stehen Links und Rechts zur Auswahl.
- Widget links platziert: Es stehen Mittig und Rechts zur Auswahl.
- Widget rechts platziert: Es stehen Links und Mittig zur Auswahl.
4. Texte und Beschriftungen anpassen
Alle Beschriftungen im Chat-Widget sind vorbelegt und funktionieren ohne Anpassung. Über eine Anpassung lässt sich die Tonalität an den eigenen Webauftritt angleichen oder eine allgemeine Formulierung durch den Begriff ersetzen, den Nutzer:innen von dort kennen.
Für alle Textfelder gilt: kurz halten. Das Chat-Widget ist auf Mobilgeräten schmal, weshalb lange Beschriftungen abgeschnitten werden oder umbrechen.
Neben den sichtbaren Beschriftungen gibt es an mehreren Stellen Aria-Labels. Diese Texte sind im Widget nicht zu sehen und werden ausschließlich von Bildschirmlesegeräten vorgelesen. Sie beschreiben, was eine Schaltfläche auslöst, und sollten deshalb die Aktion benennen, nicht nur ihren Namen wiederholen.
Aria-Labels tragen zur Barrierefreiheit bei. Mehr Informationen zur barrierefreien Einrichtung des Chatbots sind in diesem Artikel zu Barrierefreiheit beschrieben.
3.1 Name, Titel und Platzhalter
Im Bereich Name & Avatar stehen vier Textfelder zur Verfügung.
| Feld | Erscheint im Chat-Widget |
|---|---|
| Widget Titel | Als Überschrift in der Kopfzeile, zum Beispiel „Wie kann ich dir helfen?“. |
| Chatbot Name | Über jeder Nachricht des KI-Chatbots als Absender. |
| Chatbot Titel | In der Kopfzeile unter dem Widget Titel, als Rollenbezeichnung wie „Support Chatbot“. |
| Platzhalter Text | In der leeren Eingabezeile, zum Beispiel „Nachricht senden“. |
Darunter liegen der Avatar und die Widget-Farben. Beides gehört zur visuellen Gestaltung und ist im Artikel über die visuelle Darstellung des Chat-Widgets beschrieben.
Nach einem Klick auf Veröffentlichen wird die Einstellung gespeichert und sofort wirksam.
3.2 Hinweis auf ungelesene Nachrichten
Bei langen Antworten springt das Chat-Widget nicht automatisch ans Ende der Nachricht. Die Ansicht bleibt an der Stelle stehen, an der die Frage endet und die Antwort beginnt, damit der Anfang der Antwort lesbar bleibt. Kommen weitere Inhalte hinzu, etwa eine Bewertungsfrage, erscheint am oberen Rand ein Hinweis auf die ungelesenen Nachrichten.
Ein Klick auf den Hinweis scrollt direkt ans Ende der Unterhaltung. Er dient also nicht nur als optisches Signal, sondern zugleich als Schaltfläche. Im Bereich Ungelesene Nachrichten lassen sich zwei Texte anpassen:
- Sichtbare Beschriftung: Der Text auf der Schaltfläche, voreingestellt „Weitere Nachrichten“.
- Aria-Label: Der vorgelesene Text, voreingestellt „Nach unten scrollen zu weiteren Nachrichten“. Er ändert nichts an der Darstellung.
Nach einem Klick auf Veröffentlichen wird die Einstellung gespeichert und sofort wirksam.
3.3 Automatische Übersetzung
Der Bereich Automatische Übersetzung erscheint nur bei mehrsprachigen Chatbots, und die Beschriftungen werden im Chat-Widget nur dann angezeigt, wenn Inhalte tatsächlich automatisch übersetzt wurden.
Übersetzte Nachrichten tragen eine Kennzeichnung und lassen sich per Klick im Original anzeigen. Für beide Zustände gibt es je eine sichtbare Beschriftung und ein Aria-Label:
| Feld | Voreinstellung |
|---|---|
| Automatisch übersetzt | Automatisch übersetzt |
| Button Aria-Label zur Originalanzeige | Originalübersetzung des Inhalts anzeigen |
| Original | Original |
| Button Aria-label zur Übersetzungsanzeige | Automatisch übersetzten Inhalt anzeigen |
Wie die automatische Übersetzung funktioniert, welche Sprachen unterstützt werden und wo sie pro Kanal aktiviert wird, beschreibt der Artikel Mehrsprachigkeit einrichten.
Nach einem Klick auf Veröffentlichen wird die Einstellung gespeichert und sofort wirksam.
3.4 Systemmeldungen des Livechats
Wird eine Unterhaltung an den Livechat übergeben, erscheinen im Verlauf kurze Systemmeldungen. Sie machen für Nutzer:innen sichtbar, ab wann ein Mensch antwortet und ab wann wieder der KI-Chatbot übernimmt. Im Bereich Livechat lassen sich alle drei Meldungen umbenennen und an die Tonalität des Unternehmens anpassen:
| Feld | Voreinstellung | Erscheint, wenn |
|---|---|---|
| Livechat gestartet | Livechat |
Eine Person aus dem Serviceteam die Unterhaltung übernimmt. |
| An anderen Agenten weiterleiten | Chat übertragen |
Die Unterhaltung an eine andere Person weitergegeben wird. |
| Livechat beendet | Chatbot |
Die Unterhaltung zurück an den KI-Chatbot geht. |
Wie der Wechsel zwischen KI-Chatbot und Livechat im Verlauf aussieht und welche weiteren Funktionen der Livechat hat, wird im Livechat-Artikel beschrieben.
Nach einem Klick auf Veröffentlichen wird die Einstellung gespeichert und sofort wirksam.
4. Unterhaltung neustarten
Über das 3-Punkte-Menü in der Kopfzeile des Chat-Widgets erreichen Nutzer:innen ein Menü mit dem Eintrag Unterhaltung neustarten. Damit lässt sich ein Gespräch zurücksetzen und von vorn beginnen, ohne die Webseite neu zu laden. Das hilft, wenn ein Anliegen abgeschlossen oder der Gesprächsverlauf in eine falsche Richtung gelaufen ist. Nach dem Klick wird der bisherige Verlauf geleert, und die Begrüßung erscheint erneut.
Das Widget-Menü (3-Punkte-Menü) lässt sich im Hub ein- und ausschalten.
Nach einem Klick auf Veröffentlichen wird die Einstellung gespeichert und sofort wirksam.
5. Spracheingabe
Die Spracheingabe erlaubt Nutzer:innen, eine Sprachnachricht aufzunehmen, statt zu tippen. Die Aufnahme wird automatisch transkribiert und anschließend wie eine getippte Nachricht verarbeitet. Der KI-Chatbot antwortet wie gewohnt, und Transkript sowie Aufnahme erscheinen in den Unterhaltungen und im Livechat. Die Transkription wird beim Anbieter OVH verarbeitet.
Die Spracheingabe ist standardmäßig aus und wird je Kanal einzeln aktiviert. Aktiviert wird die Funktion im Bereich Elemente anpassen unter Spracheingabe:
- Den Schalter Mikrofon-Eingabe im Widget aktivieren einschalten. Die Spracheingabe ist standardmäßig ausgeschaltet und muss pro Kanal aktiviert werden.
- Unter Maximale Aufnahmedauer (Sekunden) die gewünschte Länge eintragen. Voreingestellt sind 10 Sekunden, möglich sind bis zu 60.
- Über den Schalter Sprachaufnahmen speichern festlegen, ob die Audiodatei aufbewahrt wird.
Ist Sprachaufnahmen speichern ausgeschaltet, wird die Aufnahme nur transkribiert und danach verworfen. In der Unterhaltung erscheint dann ausschließlich der transkribierte Text, keine abspielbare Audiodatei. Bleibt der Schalter eingeschaltet, werden Aufnahmen nach der Frist automatisch gelöscht, die in den Datenschutz-Einstellungen des Chatbots hinterlegt ist.
Aufnahmen sind zu keinem Zeitpunkt über einen öffentlich erratbaren Link erreichbar.
Die Spracheingabe steht in der Vorschau und im Live-Betrieb zur Verfügung, nicht jedoch im KI-Playground.
Nach einem Klick auf Veröffentlichen wird die Einstellung gespeichert und sofort wirksam.
6. KI-Indikator für generierte Antworten
Antworten, die der KI-Chatbot aus der Knowledge Base generiert, werden im Chat-Widget als solche gekennzeichnet. Nutzer:innen sehen unter der Antwort die verwendeten Quellen, einen Hinweis auf die KI-Generierung und einen Disclaimer, der zur Prüfung wichtiger Informationen auffordert.
Für Nutzer:innen wird damit nachvollziehbar, wie eine Antwort zustande gekommen ist.
Alle Einstellungen dazu sind im Artikel zum KI-Indikator im Chat-Widget ausführlich beschrieben.
7. Weitere Artikel zum Chat-Widget
Die folgenden Artikel behandeln weitere Aspekte des Chat-Widgets im Detail:
- Chat-Widget Integration auf der Webseite: Einbindung per Code, über den Google Tag Manager, als iFrame oder in einer App.
- Chat-Widget Anpassungen: Steuerung über die JS-API, also Position, Öffnen, Schließen sowie Ein- und Ausblenden per Code.
- Interaktion zwischen Webseite und Chat-Widget erweitern: Übergabe von Informationen zwischen Webseite und Unterhaltung.
- Überblick zur visuellen Darstellung: Avatar, Farben und Kontraste.
- Farben im Widget-Editor: Grund- und Sekundärfarbe sowie die einfärbbaren Elemente im Detail.
- Eingabezeile sperren: Freie Texteingabe unterbinden und Nutzer:innen über vorgegebene Antworten führen.
- Mehrsprachigkeit einrichten: Sprachen je Kanal aktivieren und die automatische Übersetzung nutzen.
- KI-Indikator im Chat-Widget: Kennzeichnung generierter Antworten und die gesetzlichen Hintergründe.