Mit Interactive UI zeigt Ihr AI Agent dem Kontakt im Chat ein Formular, Buttons, ein Karussell oder Medien, statt nur in Textform zu fragen. Am Ende dieser Anleitung haben Sie eine Aktion, die Ihr AI Agent in passenden Momenten einsetzt: Der Kontakt wählt zum Beispiel ein Datum im Kalender aus oder tippt auf eine Antwort, und der AI Agent arbeitet direkt mit seiner Auswahl weiter.
Sie brauchen dafür einen AI Agent und eine Rolle, die die Einstellungen von Connect AI bearbeiten darf: Auf der Seite "Rollen" ist das im Tab "Connect AI" die Zeile "Administration" mit "Bearbeiten". Ohne dieses Recht sehen Sie die Buttons "Hinzufügen" nicht. Optional kommt eine API- oder MCP-Aktion dazu, die Daten wie freie Termine liefert oder die Antworten speichert.
Wichtig vorab: Ein Formular erscheint nur im Website Messenger interaktiv. Auf anderen Textkanälen bekommt der Kontakt stattdessen eine Frage in Textform, und bei Anrufen bietet der AI Agent die Aktion gar nicht an; mehr dazu unter "Auf welchen Kanälen erscheint welches Element?".
Jedes interaktive Element ist eine eigene Aktion der Art "Interaktives Element anzeigen". Sie finden diese Aktionen im Connect AI Menü unter Aktionen > "Interactive UI". Interactive UI steht nur AI Agents zur Verfügung, nicht dem Copilot.
Welche Elemente gibt es?
Eine Aktion zeigt genau eines dieser Elemente:
- Formular: Sie legen eine Überschrift und die Felder fest, zum Beispiel einen Zeitraum, eine Auswahl und ein Textfeld. Der Kontakt füllt das Formular aus und schickt alle Angaben auf einmal ab.
- Buttons: Der AI Agent schreibt eine Nachricht mit Schnell-Antworten und Links, auf die der Kontakt tippen kann, im Website Messenger und auf WhatsApp optional mit einem Bild oder Video darüber.
- Karussell: Der AI Agent präsentiert Optionen als wischbare Karten mit einem Bild, einer Beschreibung und Buttons.
- Medien: Der AI Agent teilt ein Bild, ein Video oder ein Dokument mit einer Bildunterschrift.
Den Inhalt schreibt der AI Agent in jeder Unterhaltung selbst, in der Sprache des Kontakts: beim Formular die Optionen, Zeitfenster und Datumsgrenzen, bei den anderen Elementen den ganzen Text samt Karten und Buttons. Woran er sich dabei hält, legen Sie im Feld "Aktionsanweisung" fest.
Eine neue Aktion beginnt immer als Formular. Mit "+ Element manuell hinzufügen" fügen Sie sowohl Formularfelder als auch Buttons, ein Karussell oder Medien hinzu; die Gruppe "Interaktive Elemente" in diesem Menü enthält nur diese drei.
Auf welchen Kanälen erscheint welches Element?
Auf diesen Kanälen erscheinen die Elemente interaktiv, das heißt: Der Kontakt sieht und bedient das Element selbst. Wo ein Element nicht interaktiv erscheint, bekommt der Kontakt stattdessen eine Frage in Textform.
- Formular: interaktiv nur im Website Messenger; auf WhatsApp, auf Facebook und auf allen anderen Textkanälen als Textfrage.
- Buttons: interaktiv im Website Messenger, auf WhatsApp und auf Facebook; auf den anderen Textkanälen als Textfrage.
- Website Messenger: alle Antworten und Links direkt in der Nachricht, optional mit einem Bild oder Video darüber.
- WhatsApp: bis zu drei Antworten als Buttons, vier bis zehn Antworten als Liste, die der Kontakt über einen Button öffnet. Ein Bild oder Video erscheint über der Nachricht. Die ersten zwei Links kommen als eigene Nachrichten, weitere Links zusammen in einer Textnachricht.
- Facebook: bis zu drei Antworten als Buttons, mehr als drei als Schnellantworten, also antippbare Vorschläge zur Nachricht. Ein Bild oder Video gibt es dort nicht, und alle Links kommen zusammen in einer Textnachricht.
- Karussell und Medien: interaktiv im Website Messenger und auf WhatsApp; auf Facebook und auf den anderen Textkanälen als Textfrage. Auf WhatsApp braucht jede Karte ein Bild oder Video und dieselbe Zahl an Schnell-Antworten, höchstens zwei; fehlt etwas, wird der AI Agent aufgefordert, die Karten zu korrigieren. Woher Bilder, Videos und Dateien kommen dürfen, steht unter "Wie zeige ich Buttons, ein Karussell oder Medien an?".
Die anderen Textkanäle sind Instagram, Telegram, SMS, E-Mail, Threema und benutzerdefinierte Kanäle. Bei Anrufen bietet der AI Agent keine Aktion von Interactive UI an.
Die Textfrage formuliert der AI Agent selbst so, dass sie dasselbe abfragt wie das Element. Bei einem Formular mit Zeitraum und Zimmerauswahl schickt er zum Beispiel eine einzige Nachricht, die fragt, für welche Tage und welches Zimmer der Kontakt buchen möchte. Bilder, Videos und Buttons entfallen dabei; nur bei Medien wird der Link zur Datei an den Text angehängt.
Der Kontakt antwortet mit einer normalen Nachricht, der AI Agent wertet sie aus und schickt das Element nicht noch einmal.
Kann WhatsApp oder Facebook ein Element nicht darstellen, bekommt der Kontakt die Textfrage, wie auf den anderen Kanälen. Das passiert etwa, wenn WhatsApp die Nachricht ablehnt oder eine Mediendatei nicht laden kann, oder wenn Buttons auf Facebook nur Links und keine Antworten enthalten.
Auf der Bearbeitungsseite jeder Aktion zeigt ein Hinweis über dem Formular oder Element, wie es ankommt. Er nennt alle Kanalarten, auch solche, die Sie gar nicht eingerichtet haben:
- "Interaktiv auf:" nennt die Kanäle, auf denen der Kontakt das Element selbst sieht. Den Website Messenger nennt der Hinweis "Website".
- "Als Textfrage angezeigt auf:" nennt die Kanäle, auf denen der Kontakt die Frage in Textform bekommt.
- "Nicht verfügbar auf:" nennt die Kanäle, auf denen der AI Agent die Aktion gar nicht anbietet, also "Telefon".
Prüfen Sie "Interaktiv auf:", bevor Sie die Aktion speichern, denn danach lässt sich das Element nicht mehr wechseln. Soll das Element auf WhatsApp interaktiv erscheinen, wählen Sie Buttons, ein Karussell oder Medien.
Was muss ich vor dem Speichern wissen?
Das Element einer Aktion steht fest, sobald Sie die Aktion gespeichert haben. Aus einem Formular wird danach kein Karussell mehr und aus Buttons keine Medien. Für ein anderes Element erstellen Sie eine neue Aktion.
Buttons, ein Karussell und Medien lassen sich noch nicht mit Formularfeldern kombinieren. Solange ein Formular Felder hat, ist die Gruppe "Interaktive Elemente" im Menü ausgegraut, mit einem Hinweis darunter. Vor dem Speichern entfernen Sie dafür die Felder, nach dem Speichern legen Sie eine neue Aktion an.
Alles andere bleibt bearbeitbar: der Name, "Aktionsauslöser" und "Aktionsanweisung", und bei einem Formular die Überschrift und die Felder. Felder können Sie auch nach dem Speichern hinzufügen, umbenennen, verschieben und entfernen.
Wie erstelle ich eine Aktion für Interactive UI?
Öffnen Sie im Connect AI Menü Aktionen > "Interactive UI" und klicken Sie auf "Hinzufügen". Die Bearbeitungsseite der neuen Aktion "Interaktives Element anzeigen" öffnet sich direkt.
Sie können die Aktion auch bei einem AI Agent anlegen: Klicken Sie im Tab "Aktionen" des AI Agents auf "Hinzufügen", wählen Sie im Fenster "Eine neue Aktion erstellen" die Kategorie "Interactive UI" und dann die Karte "Interaktives Element anzeigen". Es öffnet sich dieselbe Bearbeitungsseite; für diesen AI Agent eingeschaltet wird die Aktion dadurch nicht.
Geben Sie der Aktion unter "Aktionsname" einen klaren Namen mit höchstens 64 Zeichen, denn daran erkennt der AI Agent, wofür die Aktion da ist. Der Name muss mit einem Buchstaben von a bis z beginnen, groß oder klein geschrieben, und mit einem Buchstaben oder einer Zahl enden; dazwischen sind auch Zahlen, Leerzeichen, Bindestriche und Unterstriche erlaubt, aber keine Umlaute, Akzente oder anderen Zeichen. Andernfalls zeigt das Feld: "Erlaubt sind nur Buchstaben, Zahlen, Leerzeichen, Bindestriche und Unterstriche."
Beschreiben Sie unter "Aktionsauslöser", wann der AI Agent das Element zeigen soll, statt in Textform zu fragen, zum Beispiel wenn der Kontakt ein Datum, ein Zeitfenster oder eine von mehreren Optionen wählen soll.
Soll der AI Agent mit echten Daten arbeiten, muss die API- oder MCP-Aktion dafür bereits existieren; wie Sie sie anlegen, lesen Sie auf den Seiten API Actions und MCP. Beschreiben Sie dann unter "Aktionsanweisung", woher die Daten kommen und wohin die Antworten gehen: etwa eine Aktion, die die verfügbaren Optionen oder Zeitfenster liefert, und eine, die die Antworten des Kontakts speichert. Unter "Aktionsanweisung" können Sie auch feste Werte und Regeln festlegen. Rechts auf der Bearbeitungsseite finden Sie Tipps für beide Felder.
Nennen Sie keine Datenquelle, wählt der AI Agent selbst sinnvolle Grenzen, etwa einen Kalender für die nächsten Tage. Ihre tatsächliche Verfügbarkeit kennt er dann nicht.
Beachten Sie, dass der AI Agent Texte aus "Aktionsauslöser" und "Aktionsanweisung" in seinen Antworten an Kontakte weitergeben kann. Eine Regel, nur Termine aus Ihrer API-Aktion anzubieten, ist unbedenklich; Zugangsdaten, interne Telefonnummern oder Daten einzelner Kunden gehören nicht hinein.
Wie baue ich ein Formular?
Beschreiben Sie unten auf der Bearbeitungsseite unter "Beschreiben Sie, was Sie brauchen, und lassen Sie es die KI für Sie erstellen", welche Angaben Sie erfassen möchten, und klicken Sie auf "Generieren". Die Oberfläche gibt diesem Feld keinen eigenen Namen; diese Anleitung nennt es den KI-Formularassistenten. Er hilft nur beim Einrichten der Aktion, nicht in der Unterhaltung.
Der KI-Formularassistent fügt passende Felder hinzu und markiert sie mit "KI-generiert". Ist die Überschrift noch leer, schlägt er auch eine vor. Vorhandene Felder bleiben erhalten, und Felder, deren Titel es im Formular schon gibt, fügt er nicht noch einmal hinzu.
Erscheint "Aus dieser Beschreibung konnte kein Formular erstellt werden. Nennen Sie die Angaben, die Sie erfassen möchten.", beschreiben Sie konkreter, welche Angaben Sie brauchen.
Der Hinweis über den Feldern zeigt, auf welchen Kanälen das Formular interaktiv erscheint, wie unter "Auf welchen Kanälen erscheint welches Element?" beschrieben.
Um Felder selbst hinzuzufügen, klicken Sie auf "+ Element manuell hinzufügen" und wählen einen Feldtyp. Im Menü steht neben jedem Typ ein kurzer Hinweis.
- Datum und Uhrzeit: "Kalender" für ein einzelnes Datum, "Zeitraum" für Start und Ende, "Zeitfenster" für eine Uhrzeit aus mehreren angebotenen Zeiten
- Auswahl: "Einfachauswahl", wenn der Kontakt eine Option wählt, "Mehrfachauswahl", wenn er mehrere wählen darf
- Freie Eingabe: "Text" für eine kurze Antwort, "Zahl" für einen Wert innerhalb eines Bereichs, "Langer Text" für eine Beschreibung
Jedes Feld zeigt eine Vorschau mit Beispielwerten. Die echten Optionen, Zeitfenster, Datumsgrenzen und Grenzwerte trägt der AI Agent während der Unterhaltung ein, so wie Sie es unter "Aktionsanweisung" festgelegt haben.
Klicken Sie auf den Titel eines Feldes, um ihn zu ändern. Ein neues Feld heißt zunächst wie sein Typ. Geben Sie jedem Feld einen eigenen Titel, denn der Kontakt sieht ihn über dem Feld, und seine Antwort kommt mit diesem Titel im Message Center an.
Die Reihenfolge der Felder ändern Sie per Drag-and-drop. Mit dem Papierkorb-Symbol entfernen Sie ein Feld.
Tragen Sie unter "Überschrift" ein, was der Kontakt über dem ganzen Formular lesen soll. Die Überschrift steht einmal über dem Formular, der Titel eines Feldes direkt über diesem Feld.
Überschrift und Feldtitel erscheinen genau so, wie Sie sie eingeben, und werden für Kontakte in anderen Sprachen nicht übersetzt. Schreiben Sie sie in der Sprache Ihrer Kontakte.
Die Überschrift ist Pflicht, und alle Felder sind Pflichtfelder: Ein Feld optional zu machen ist nicht möglich, und der Kontakt kann das Formular erst abschicken, wenn er jedes Feld ausgefüllt hat.
Fehlt beim Speichern etwas, nennt die Bearbeitungsseite den Grund:
- "Fügen Sie mindestens ein Feld hinzu, um diese Aktion zu speichern." erscheint, wenn das Formular noch kein Feld hat.
- "Fügen Sie eine Überschrift hinzu, um diese Aktion zu speichern." erscheint, wenn die Überschrift leer ist.
- "Geben Sie diesem Feld einen Titel, um diese Aktion zu speichern." erscheint an einem Feld ohne Titel.
- "Ein anderes Feld verwendet diesen Titel bereits. Geben Sie jedem Feld einen eigenen Titel." erscheint, wenn zwei Felder gleich heißen, auch bei unterschiedlicher Groß- und Kleinschreibung.
Wie zeige ich Buttons, ein Karussell oder Medien an?
Klicken Sie auf "+ Element manuell hinzufügen" und wählen Sie in der Gruppe "Interaktive Elemente" eines der Elemente "Buttons" (Antwort per Tippen), "Karussell" (Wischbare Karten) oder "Medien" (Bild, Video oder Datei).
Das geht nur, solange das Formular keine Felder hat. Solange es Felder hat, ist die Gruppe ausgegraut, mit dem Hinweis "Interaktive Elemente können noch nicht mit Formularfeldern kombiniert werden. Erstellen Sie dafür eine separate Aktion." Vor dem Speichern entfernen Sie die Felder mit dem Papierkorb-Symbol, danach lässt sich die Gruppe wieder wählen; nach dem Speichern legen Sie stattdessen eine neue Aktion an.
Die Bearbeitungsseite zeigt dann statt des Formulars das gewählte Element mit einer Vorschau aus Beispielinhalten und darüber den Hinweis zu den Kanälen. Solange die Aktion nicht gespeichert ist, entfernen Sie das Element mit dem Papierkorb-Symbol und bauen stattdessen ein Formular.
Beschreiben Sie unter "Aktionsanweisung", was der AI Agent zeigen soll, zum Beispiel welche Produkte das Karussell vorstellt oder welche Antworten die Buttons anbieten. Ein Karussell hat 2 bis 10 Karten, Buttons bieten bis zu 10 Antworten oder Links.
Bilder, Videos und Dateien bindet der AI Agent nur über Links ein, die mit https beginnen, und nur aus diesen Quellen:
- Buttons (Bild oder Video über der Nachricht): Links in Ihrer Anweisung, im Ergebnis einer anderen Aktion (etwa einer API-Aktion) oder in der Unterhaltung
- Karussell (Bild oder Video jeder Karte): dieselben Quellen wie bei Buttons
- Medien (die Datei): Links in Ihrer Anweisung oder in der Unterhaltung; tragen Sie den Link der Datei dafür unter "Aktionsanweisung" ein
"In der Unterhaltung" heißt: ein Link, den jemand im Chat geschickt hat.
Wie schalte ich die Aktion für meinen AI Agent ein und teste sie?
Klicken Sie auf "Speichern", wenn das Formular oder das Element fertig ist. Eine neue Aktion ist für keinen AI Agent eingeschaltet, auch nicht für den AI Agent, in dessen Tab "Aktionen" Sie sie angelegt haben.
Haben Sie die Aktion unter Aktionen > "Interactive UI" angelegt, kehren Sie zur Übersicht zurück. Die Spalte "Einstellungen" zeigt dort, welche AI Agents die Aktion verwenden; mit den Einstellungen von Connect AI hat sie nichts zu tun. Klicken Sie auf "Keine Einstellungen" und wählen Sie im Fenster "Verbundene Einstellungen" die AI Agents aus, die die Aktion verwenden sollen. Danach steht in der Spalte zum Beispiel "1 AI Agent".
Haben Sie die Aktion bei einem AI Agent angelegt, kehren Sie in dessen Tab "Aktionen" zurück. Schalten Sie die Aktion dort in der Spalte "Status" ein.
Zum Testen brauchen Sie ein Widget für den Website Messenger, und der Button "Agent testen" erscheint nur, wenn zum AI Agent ein Chatbot gehört. Sobald die Aktion für diesen AI Agent eingeschaltet ist, klicken Sie im AI Agent rechts neben den Tabs auf "Agent testen", wählen unter "Widget" ein Widget und klicken auf "Test-Unterhaltung öffnen".
Schreiben Sie in der Testunterhaltung eine Nachricht, die zu Ihrem "Aktionsauslöser" passt. Erscheint das Element nicht, prüfen Sie, ob die Aktion für den AI Agent eingeschaltet ist und ob der Text unter "Aktionsauslöser" zu Ihrer Nachricht passt.
Der Test läuft im Website Messenger. Wie das Element auf WhatsApp oder als Textfrage ankommt, können Sie damit nicht ausprobieren.
Was sieht der Kontakt im Website Messenger?
Im Website Messenger erscheint das Element direkt in der Unterhaltung. Ein Formular füllt der Kontakt aus und schickt es mit "Bestätigen" ab.
Fehlt eine Angabe, markiert das Formular das Feld rot, und der Kontakt kann erst abschicken, wenn alles ausgefüllt ist.
Nach dem Abschicken zeigt das Formular die Angaben des Kontakts und lässt sich nicht mehr ändern.
Hat der Kontakt eine Angabe schon früher in der Unterhaltung gemacht, kann der AI Agent sie im Formular vorausfüllen.
Bei Buttons und beim Karussell antwortet der Kontakt, indem er auf eine Antwort tippt.
Ist die Unterhaltung beendet, sieht der Kontakt das Element weiterhin, kann es aber nicht mehr bedienen.
Was sieht der Operator im Message Center?
Im Message Center erscheint das Element als Nachricht des AI Agents mit der Frage in Textform und darunter dem Hinweis "Interaktives Element". Sobald der Kontakt über das Element geantwortet hat, kommt "Beantwortet" dazu.
Die Antwort des Kontakts steht als eigene Nachricht darunter, beim Formular eine Zeile pro Feld mit Titel und Angabe.
Was ist mit "Karussell anzeigen" und "Medien und Buttons anzeigen"?
Die älteren Aktionsarten "Karussell anzeigen" und "Medien und Buttons anzeigen" unter Aktionen > "System" tragen das Label "LEGACY". Sie funktionieren weiter, Sie können sie auch weiterhin neu anlegen, und nichts wird automatisch umgestellt.
Für neue Aktionen verwenden Sie hier statt "Karussell anzeigen" das Element "Karussell", und statt "Medien und Buttons anzeigen" das Element "Buttons" oder, für ein Bild, ein Video oder eine Datei, das Element "Medien" ("Bild, Video oder Datei"). Wenn Sie mit der Maus auf das Label LEGACY zeigen, nennt sein Hinweis nur "Buttons" und "Karussell"; für ein Bild, ein Video oder eine Datei verwenden Sie "Medien".
Buttons können über der Nachricht ein Bild oder Video zeigen, aber keine Datei. Mit Interactive UI zeigt der AI Agent pro Antwort nur ein Element, eine Datei und Buttons kommen also nie in einer Nachricht an; dafür brauchen Sie zwei Aktionen, eine mit "Medien" und eine mit "Buttons". Die LEGACY-Aktion "Medien und Buttons anzeigen" kann dagegen eine Datei zusammen mit Buttons in einer Nachricht schicken und deckt diesen Fall weiter ab.
Schalten Sie für denselben Zweck nicht gleichzeitig eine LEGACY-Aktion und eine neue Aktion ein.
Mehr zum Label LEGACY lesen Sie auf der Seite System Actions unter "Was bedeutet das Label LEGACY?".