Mit einer Integration werden Endnutzerinteraktionen für Sie abgewickelt. Sie müssen nur einen Agent erstellen, optional einen Webhook implementieren und die Integration konfigurieren.
In diesem Leitfaden erfahren Sie, wie Sie mithilfe der Dialogflow Messenger-Integration eine einfache Textchat-Benutzeroberfläche für Ihren Agent bereitstellen.
Hinweise
Wenn Sie keine Integration verwenden möchten, können Sie diese Kurzanleitung überspringen.
Bevor Sie diese Anleitung lesen, sollten Sie mit Folgendem vertraut sein:
- Dialogflow CX-Grundlagen
- Einrichtungsschritte ausführen
- Die Schritte in der Kurzanleitung Agent erstellen ausführen. In den folgenden Schritten wird derselbe Agent weiterverwendet. Wenn Sie diesen Agent nicht mehr haben, können Sie den Agent herunterladen und wiederherstellen.
Einrichtung
So richten Sie den nicht authentifizierten Zugriff auf Ihren Dialogflow Messenger-Agent ein:
- Zur Dialogflow CX Console
- Wählen Sie Ihr Google Cloud-Projekt aus.
- Wählen Sie den Agent aus.
- Wählen Sie den Tab Verwalten.
- Klicken Sie im linken Seitenleistenmenü auf Integrations.
- Klicken Sie in Dialogflow Messenger auf Connect (Verbinden).
- Ein Konfigurationsdialogfeld wird geöffnet.
- Wenn die Integration bereits für diesen Agent eingerichtet wurde, wird ein einbettbarer HTML-Code angezeigt. Klicken Sie am unteren Rand des Dialogfelds auf Deaktivieren..., um die Einstellungen im nächsten Schritt neu zu konfigurieren, unabhängig davon, ob Sie authentifiziert oder nicht authentifiziert werden sollen.
- Wählen Sie eine Umgebung aus
- Wählen Sie Nicht authentifizierte API aus.
- Wählen Sie einen Stil aus.
- Optional: Beschränken Sie den Domainzugriff.
- Klicken Sie auf Nicht authentifizierte API aktivieren.
- Im Dialogfeld wird der HTML-Code angezeigt, der eingebettet werden kann. Kopieren Sie diesen Code.
- Klicken Sie auf Fertig.
Embed
Fügen Sie den oben kopierten Einbettungscode in eine Webseite auf Ihrer Website ein.
Die HTML-Elemente <script> und <df-messenger> sollten sich im <body>-Element Ihrer Seite befinden.
Wenn Sie eine authentifizierte Integration verwenden, legen Sie das Attribut oauth-client-id für <df-messenger> auf Ihre OAuth-Client-ID fest.
Aktualisieren Sie alle anderen Attribute, die aktualisiert werden müssen.
Fügen Sie dem <head>-Element auch Folgendes hinzu, um responsive Layouts zu ermöglichen:
<meta name="viewport" content="width=device-width, initial-scale=1">
Nach dem Einbetten können Sie über die Webseite mit dem Agent interagieren. Klicken Sie dazu auf das Chatsymbol unten rechts.
Anpassen
Sie können die Darstellung und das Verhalten dieser Benutzeroberfläche auf verschiedene Arten anpassen. Weitere Informationen finden Sie in der Dialogflow Messenger-Dokumentation.