Diese Integration bietet ein anpassbares Chatdialogfeld für Ihren Kundenservicemitarbeiter. die in Ihre Website eingebettet werden können.
Einrichtung
Diese Integration kann entweder authentifiziert oder nicht authentifiziert sein Zugriff auf Abfragen von Endnutzer-Agents.
Nicht authentifizierte 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 zuvor für diesen Agent eingerichtet wurde, sehen Sie den einbettbaren HTML-Code. Unabhängig davon, ob Sie möchten, was authentifiziert oder nicht authentifiziert ist, Klicken Sie unten im Dialogfeld auf die Schaltfläche Deaktivieren.... sodass Sie die Einstellungen im nächsten Schritt neu konfigurieren können.
- Wählen Sie eine Umgebung aus
- Wählen Sie Nicht authentifizierte API aus.
- Wählen Sie einen Stil aus.
- Optional können Sie den Domainzugriff einschränken.
- Klicken Sie auf Nicht authentifizierte API aktivieren.
- Im Dialogfeld wird der einbettbare HTML-Code angezeigt. die auf Ihrer Website eingebettet werden können. Kopieren Sie diesen Code.
- Klicken Sie auf Fertig.
Authentifizierte Einrichtung
So richten Sie den 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 zuvor für diesen Agent eingerichtet wurde, sehen Sie den einbettbaren HTML-Code. Unabhängig davon, ob Sie möchten, was authentifiziert oder nicht authentifiziert ist, Klicken Sie unten im Dialogfeld auf die Schaltfläche Deaktivieren.... sodass Sie die Einstellungen im nächsten Schritt neu konfigurieren können.
- Wählen Sie eine Umgebung aus
- Wählen Sie Autorisierte API aus.
- Wählen Sie einen Stil aus.
- Optional können Sie den Domainzugriff einschränken.
- Klicken Sie auf Autorisierte API aktivieren.
- Im Dialogfeld wird der einbettbare HTML-Code angezeigt. die auf Ihrer Website eingebettet werden können. Kopieren Sie diesen Code.
- Klicken Sie auf Fertig.
- Richten Sie den OAuth-Client ein:
<ph type="x-smartling-placeholder">
- </ph>
- OAuth-Zustimmungsbildschirm erstellen
für Ihre Organisation.
Fügen Sie
./auth/cloud-platformals erforderlichen Bereich hinzu. - Erstellen Sie eine OAuth 2.0-Client-ID.
Gehen Sie unter Autorisierte JavaScript-Quellen wie folgt vor:
Geben Sie die HTTP-Quellen an, die Ihren Agent hosten und abfragen dürfen.
Beispiel:
https://your-company.com - Endnutzern die Berechtigung erteilen, Ihren Agent abzufragen Fügen Sie die einzelnen Endnutzer oder einen gruppe als Hauptkonto mit dem Dialogflow API-Client und Service Usage Consumer Rollen.
- OAuth-Zustimmungsbildschirm erstellen
für Ihre Organisation.
Fügen Sie
Einbetten
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,
Attribut oauth-client-id für <df-messenger> festlegen
an Ihre OAuth-Client-ID an.
Aktualisieren Sie alle anderen Attribute, die aktualisiert werden müssen.
Um responsive Layouts zu ermöglichen,
Fügen Sie Ihrem <head>-Element außerdem Folgendes hinzu:
<meta name="viewport" content="width=device-width, initial-scale=1">
Anpassung
Es gibt viele HTML-Anpassungen und CSS-Anpassungen die Sie anwenden können, um die Darstellung und das Verhalten des Chat-Dialogfelds zu beeinflussen.
JavaScript
Es gibt viele JavaScript-Ereignisse und JavaScript-Funktionen über die Sie mit dem Chat-Dialogfeld interagieren können.
Beispiel
Im folgenden Beispiel sehen Sie, HTML-Anpassung, CSS-Anpassungen, und JavaScript-Ereignisse verarbeiten:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>My chat</title>
<style>
df-messenger {
/*
* Customize as required. df-messenger will fill the
* space that is provided.
*/
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 320px;
}
</style>
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
location="global" <!-- TODO: update agent location as needed -->
project-id="my-project-id" <!-- TODO: update project ID -->
agent-id="my-agent-id" <!-- TODO: update agent ID -->
language-code="en" <!-- TODO: update agent language as needed -->
>
<df-messenger-chat
chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
></df-messenger-chat>
</df-messenger>
<script>
// An example of handling events: Navigate to the first suggested URL.
document.addEventListener('df-url-suggested', (event) => {
if (Array.isArray(event.detail.suggestedUrls) &&
event.detail.suggestedUrls.length) {
window.location.href = event.detail.suggestedUrls[0];
}
});
</script>
</body>
</html>
Auftragsausführung
Es gibt viele Antworttypen für die Auftragsausführung die Sie für Agent-Antworten verwenden können.
Feedback beantworten
Wenn Feedback geben aktiviert ist, werden im Chatdialog standardmäßig „Mag ich“-Bewertungen hinzugefügt und „Mag ich nicht“ auf die Benutzeroberfläche. Während des Gesprächs können Endnutzer auf diese Schaltflächen klicken, um Feedback zu den Antworten des Kundenservicemitarbeiters zu geben. Wählt die nutzende Person „Mag ich nicht“ aus, können sie optional einen Grund für das negative Feedback angeben.
Benutzerdefinierte Feedbackkomponente
Zur Angabe eines benutzerdefinierten Feedback-Elements muss ein neues benutzerdefiniertes Element auf der Website definiert werden.
Zum Senden des Feedbacks muss das Element ein df-custom-submit-feedback-clicked-Ereignis ausgeben. Das enthaltene Feld detail muss ein String sein.
class CustomFeedbackElement extends HTMLElement {
constructor() {
super();
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
this.renderRoot = this.attachShadow({mode: 'open'});
}
// Web component Lifecycle method.
connectedCallback() {
const wrapper = document.createElement('div');
// Build the component as required.
const button = document.createElement('button');
button.innerText = 'Submit';
button.addEventListener('click', () => {
this._onSubmitClick();
});
wrapper.appendChild(button);
this.renderRoot.appendChild(wrapper);
}
// Called when Submit button is clicked.
_onSubmitClick() {
const event = new CustomEvent("df-custom-submit-feedback-clicked", {
// `detail` may be any string,
// this will be sent to the backend to be stored.
detail: JSON.stringify({
"usefulness": 2,
"accuracy": 3,
}),
// Required to propagate up the DOM tree
// https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
bubbles: true,
// Required to propagate across ShadowDOM
// https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
composed: true,
});
this.dispatchEvent(event);
}
}
(function() {
// Registers the element. This name must be "df-external-custom-feedback".
customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();
Debugging
So testen Sie den Agent lokal mit Dialogflow Messenger:
- Betten Sie das Dialogflow Messenger-Element wie oben beschrieben in eine Seite ein.
- Starten Sie einen lokalen HTTP-Server für diese Seite mit einem bestimmten Port.
- Greifen Sie unter
http://localhost:port_numberauf diese Seite zu.