Web-Kanal
Das Web-Widget bietet eine barrierefreie Live-Chat-Option für deine Website.
Unser Widget ermöglicht eine barrierefreie Live-Chat-Option auf Webseiten. Es ermöglicht Besuchenden die direkte Interaktion mit dem AI Agent.. Unterhaltungen können über Elemente im Flow gezielt an Teams oder menschliche Agenten übergeben oder über die Inbox jederzeit von Mitarbeitenden übernommen werden.
Erstellung des Kanals
Folge diesen Schritten, um ein neues Web-Widget einzurichten:
Kanal hinzufügen: Navigiere zu Einstellungen > Kanäle und klicke auf „Kanal hinzufügen“.
Typ wählen: Wähle die Option „Web-Widget verbinden“ und klicke auf „Fortfahren“.
Kanalname: Vergib einen Kanalnamen. Dieser kann später angepasst werden.
Kanalbeschreibung (optional): Füge eine Beschreibung hinzu. Diese kann später angepasst werden.
Schlüssel: Ein Authentifizierungsschlüssel wird automatisch generiert.
Bereitstellungsumgebung: Wähle die passende Bereitstellungsumgebung (Entwicklung, Test oder Produktiv) und gehe auf "Fortfahren".
Domains: Hinterlege eine oder mehrere Domains, auf welcher/n das Web-Widget verfügbar sein soll.
Abschluss: Bestätige mit „Fertigstellen“. Die Rufnummer wird nun automatisch generiert.
Konfiguration und Design
Um das Erscheinungsbild des Web-Widgets anzupassen oder technische Details für die Einbindung abzurufen, klicke in der Kanalübersicht auf „Web-Widget konfigurieren“.
Alle vorgenommenen Änderungen müssen oben rechts mit „Änderungen speichern“ bestätigt werden.
Live-Vorschau
Auf der linken Seite der Konfigurationsoberfläche befindet sich eine interaktive Visualisierung. Alle Anpassungen an Farben, Texten oder Darstellungen, die auf der rechten Seite vorgenommen werden, werden hier sofort in Echtzeit angezeigt.
Farben und Darstellung
Farben: Die Anpassung erfolgt über Hex-Codes.
Barrierefreiheit: Achte bei der Farbwahl auf ausreichende Kontraste, um die Barrierefreiheit für alle Nutzenden zu gewährleisten.
Dark-Mode: Siehe, wie das Widget Nutzenden mit aktiviertem Dark-Mode angezeigt wird.
Avatar: Der AI Agent-Avatar kann optional ein- oder ausgeblendet werden.
Datenschutzhinweis: Legt fest, ob Nutzende vor Chat-Start die Nutzungshinweise bestätigen müssen. Optional kann dies direkt an die Cookie-Einstellungen der einbindenden Website gebunden werden.
Dateiupload: Aktiviert oder deaktiviert das Icon zum Hochladen von Dateien für den Endnutzer.
Texte
Über das blaue Drop-down-Menü können alle im Widget sichtbaren Texte für jede im AI Agent verfügbare Sprache individuell angepasst werden.
Sicherheit und Einbindung
Domains (Whitelist)
Aus Sicherheitsgründen wird das Widget nur auf autorisierten Webseiten geladen.
Format: Gib nur die Basis-Domain inklusive Protokoll an, ohne Unterpfade und ohne abschließenden Schrägstrich. Beispiel:
Korrekt:
https://example.comFalsch:
https://example.com/shop/
Einbindung auf der Website
In diesem Bereich wird das Code-Script generiert. Kopiere dieses Snippet, um es in den Header oder Body deiner Webseite einzufügen.
Testen: Das Widget aufrufen
Über die Option „Widget aufrufen“ am oberen Seitenrand kannst du das Widget in einem Testfenster öffnen.
Unterschied zum Debug-Chat: Im Gegensatz zum Debug-Chat werden Nachrichten, die hier erzeugt werden, dauerhaft in der Inbox gespeichert und wie echte Kundenanfragen behandelt.
Best Practice
Live-Chat-Simluation: Das Web-Widget eignet sich hervorragend, um reale Support-Szenarien zu testen.
Inbox-Workflow: Öffne die Inbox in einem separaten Tab.
Interaktion: Schreibe dem AI Agent über das aufgerufene Widget.
Simulation: Nutze die Inbox, um manuell auf AI Agent-Nachrichten zu antworten, Tags zu vergeben oder gezielt Flows innerhalb der laufenden Unterhaltung anzustoßen.
Bereitstellungsumgebung: Achte darauf, dass das Web-Widget in der Umgebung bereitgestellt wurde, in welcher die Tests erfolgen sollen.
Vergleich: Nutze den Debug-Chat für schnelle Logik-Tests und das Web-Widget für Tests, die in der Inbox erhalten bleiben sollen.
Last updated