Bot-Designer – Chat-Interface gestalten und einbetten
Mit dem Bot-Designer konfigurieren Sie KI-Agenten, die als Chat auf Websites eingebettet werden. Der Bot-Designer ist ein visueller Editor zur Anpassung von Design, Verhalten und Einbettung des Chats.
Kurz erklärt
- KI-Agent erstellen
- Zugriff auf Öffentlich setzen
- Bot-Designer über die Agentenliste öffnen
- Chat-Typ konfigurieren
- Embed-Code generieren und einfügen
Voraussetzungen
Voraussetzungen für die Einbettung
Damit ein KI-Agent eingebettet werden kann, müssen folgende Voraussetzungen erfüllt sein:
- Der KI-Agent ist auf Öffentlich gesetzt
- Das entsprechende Bot-Abonnement ist aktiv
Ist die Option Öffentlich nicht verfügbar, steht das notwendige Abonnement nicht zur Verfügung und der Agent kann nicht eingebettet werden.
Bot-Designer öffnen
Der Bot-Designer wird direkt über die Agentenliste aufgerufen:
- Öffnen Sie die Agentenliste :material-open-in-new:
- Klicken Sie beim gewünschten Agenten auf das Drei-Punkte-Menü
- Wählen Sie Einbetten
Der Bot-Designer öffnet sich in einer separaten Ansicht.
Chat-Typen im Bot-Designer
Im Bot-Designer stehen drei Chat-Typen zur Verfügung. Jeder Typ ist für unterschiedliche Einsatzszenarien gedacht und bietet angepasste Konfigurationsmöglichkeiten.
Chat Bubble
Die Chat Bubble ist ein schwebender Chat, der am Rand der Website angezeigt wird und sich bei Interaktion öffnet.
Typische Einsatzbereiche sind Websites, auf denen Besucher schnell und niedrigschwellig mit einem KI-Agenten interagieren sollen.
Konfigurationsmöglichkeiten:
- Farben der Chat Bubble (Primärfarbe, Icon-Farbe, Hover-Farbe)
- Grösse des Chat-Fensters (Breite und Höhe)
- Kopfzeile mit Logo oder Text
- Zusätzliche Hinweise unter dem Eingabefeld z. B. Haftungshinweise oder Verweise auf Datenschutz- oder Sicherheitsseiten Optional mit Link
- Automatisches Öffnen der Chat Bubble – separat für Desktop und Mobile – zeitgesteuert
- Spracheingabe (Speech-to-Text)
Payload-Variablen Bei der Chat Bubble können Payload-Variablen definiert werden, um dem KI-Agenten zusätzlichen Kontext zu übergeben.
Geben Sie die Variablen im Format role=assistant&name=Claudius ein.
Beispiele:
- Übergabe der aktuellen Seite (
page=pricing) - Übergabe einer Kampagnen-ID (
source=landingpage_2025) - Übergabe einer Sprache oder Region (
lang=de)
Diese Informationen stehen dem KI-Agenten während der Konversation zur Verfügung.
Container Chat
Der Container Chat ist ein fix eingebetteter Chat, der direkt in das Seitenlayout integriert wird.
Er eignet sich besonders für Seiten mit klar definierten Content-Bereichen, wie Landingpages oder Service-Seiten.
Konfigurationsmöglichkeiten:
- Primärfarbe und Icon-Farbe
- Breite und Höhe des Chat-Containers
- Ein- oder Ausblenden der Kopfzeile
- Anzeige oder Ausblenden des Buttons Neue Session
- Kopfzeile mit Logo oder Text
- Zusätzliche Hinweise unter dem Eingabefeld Optional mit Link
- Spracheingabe (Speech-to-Text)
Payload-Variablen Auch beim Container Chat können Payload-Variablen genutzt werden, um Kontextinformationen zu übergeben.
Beispiele:
- Übergabe eines Bereichs oder Produkts (
context=support) - Übergabe eines Mandanten oder Kunden (
tenant=customer_a)
iFrame Chat
Der iFrame Chat ist die minimalste Variante zur Einbettung eines KI-Agenten.
Er eignet sich für einfache Integrationen, bei denen nur der Chat selbst eingebettet werden soll.
Konfigurierbar sind:
- Breite
- Höhe
Payload-Variablen und zusätzliche Hinweise sind beim iFrame Chat nicht vorgesehen.
Embed-Code generieren
Nachdem der gewünschte Chat-Typ konfiguriert wurde:
- Klicken Sie auf Generate Embed Code
- Kopieren Sie den generierten Code
- Fügen Sie den Code an der gewünschten Stelle in den HTML-Quellcode Ihrer Website ein
Hinweis zum Embed-Code
Der generierte Embed-Code wird nicht gespeichert. Änderungen im Bot-Designer erfordern eine erneute Generierung des Codes.