Questa integrazione fornisce una finestra di dialogo di chat personalizzabile per il tuo agente che può essere incorporata nel tuo sito web.
Configurazione
Questa integrazione può consentire l'accesso alle query dell'agente utente finale autenticato o non autenticato.
Configurazione non autenticata
Per configurare l'accesso non autenticato all'agente Dialogflow CX Messenger:
- Vai alla console Dialogflow CX.
- Scegli il tuo progetto Google Cloud.
- Seleziona il tuo agente.
- Seleziona la scheda Gestisci.
- Fai clic su Integrazioni nel menu della barra laterale a sinistra.
- Fai clic su Connetti in Dialogflow CX Messenger.
- Si apre una finestra di dialogo di configurazione.
- Se l'integrazione è stata configurata in precedenza per questo agente, vedrai il codice HTML incorporabile. Indipendentemente dal fatto che tu voglia l'autenticazione o meno, fai clic sul pulsante Disattiva… nella parte inferiore della finestra di dialogo, in modo da poter riconfigurare le impostazioni nel passaggio successivo.
- Seleziona un ambiente.
- Seleziona API non autenticata.
- Seleziona uno stile.
- (Facoltativo) Limita l'accesso al dominio.
- Fai clic su Abilita l'API non autenticata.
- La finestra di dialogo mostrerà il codice HTML incorporabile che può essere incorporato nel tuo sito web. Copia questo codice.
- Fai clic su Fine.
Configurazione autenticata
Per configurare l'accesso autenticato all'agente Dialogflow CX Messenger:
- Vai alla console Dialogflow CX.
- Scegli il tuo progetto Google Cloud.
- Seleziona il tuo agente.
- Seleziona la scheda Gestisci.
- Fai clic su Integrazioni nel menu della barra laterale a sinistra.
- Fai clic su Connetti in Dialogflow CX Messenger.
- Si apre una finestra di dialogo di configurazione.
- Se l'integrazione è stata configurata in precedenza per questo agente, vedrai il codice HTML incorporabile. Indipendentemente dal fatto che tu voglia l'autenticazione o meno, fai clic sul pulsante Disattiva… nella parte inferiore della finestra di dialogo, in modo da poter riconfigurare le impostazioni nel passaggio successivo.
- Seleziona un ambiente.
- Seleziona API autorizzata.
- Seleziona uno stile.
- (Facoltativo) Limita l'accesso al dominio.
- Fai clic su Abilita l'API autorizzata.
- La finestra di dialogo mostrerà il codice HTML incorporabile che può essere incorporato nel tuo sito web. Copia questo codice.
- Fai clic su Fine.
- Configura il client OAuth:
- Crea una schermata per il consenso OAuth
per la tua organizzazione.
Aggiungi
https://www.googleapis.com/auth/cloud-platformcome ambito obbligatorio. - Crea un ID client OAuth 2.0.
In Origini JavaScript autorizzate,
specifica le origini HTTP autorizzate a ospitare ed eseguire query sull'agente.
Ad esempio:
https://your-company.com. - Fornisci agli utenti finali l'autorizzazione a interrogare il tuo agente. Aggiungi ogni utente finale o un gruppo come entità con i ruoli Client API Dialogflow e Consumer di Service Usage.
- Crea una schermata per il consenso OAuth
per la tua organizzazione.
Aggiungi
Embed
Incolla il codice di incorporamento che hai copiato in precedenza in una pagina web del tuo sito web.
Gli elementi HTML <script> e <df-messenger>
devono trovarsi nell'elemento <body> della pagina.
Se utilizzi un'integrazione autenticata,
imposta l'attributo oauth-client-id per <df-messenger>
sull'ID client OAuth. Se vuoi utilizzare le identità degli utenti finali per l'autenticazione
dello strumento,
imposta l'attributo access-token-name con il nome che preferisci.
Quindi, utilizza il token di autenticazione con valore $session.params.ACCESS_TOKEN_NAME
per l'autenticazione dello strumento.
Aggiorna tutti gli altri attributi che richiedono un aggiornamento.
Per consentire layout adattabili,
aggiungi anche quanto segue all'elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Personalizzazione
Esistono molte personalizzazioni HTML e personalizzazioni CSS che puoi applicare per influire sull'aspetto e sul comportamento della finestra di dialogo della chat.
JavaScript
Esistono molti eventi JavaScript e funzioni JavaScript che puoi utilizzare per interagire con la finestra di dialogo della chat.
Esempio
Il seguente esempio mostra la personalizzazione HTML, la personalizzazione CSS e la gestione degli eventi JavaScript:
<!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>
Fulfillment
Esistono molti tipi di risposte di evasione che puoi utilizzare per le risposte dell'agente.
Feedback sulla risposta
Se il feedback sulla risposta è attivato, per impostazione predefinita la finestra di dialogo della chat aggiungerà i pulsanti Mi piace e Non mi piace all'interfaccia utente. Durante la conversazione, un utente finale può fare clic su questi pulsanti per fornire un feedback sulle risposte dell'agente. Se l'utente seleziona Non mi piace, può anche indicare il motivo del feedback negativo, se vuole.
Componente Feedback personalizzato
Per specificare un elemento di feedback personalizzato, è necessario definire un nuovo elemento personalizzato sul sito web.
Per inviare il feedback, l'elemento deve emettere un evento df-custom-submit-feedback-clicked. Il campo detail contenuto deve essere una stringa.
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);
})();
Debug
Per testare l'agente con Dialogflow CX Messenger a livello locale:
- Incorpora l'elemento Dialogflow CX Messenger in una pagina come descritto sopra.
- Avvia un server HTTP locale per quella pagina con una porta specifica.
- Accedi a questa pagina all'indirizzo
http://localhost:port_number.