Questa integrazione fornisce una finestra di dialogo di chat personalizzabile per il tuo agente che puoi incorporare nel tuo sito web.
Configurazione
Questa integrazione ti consente di fornire l'accesso alle query dell'agente per gli utenti finali autenticati o non autenticati.
Configurazione non autenticata
Per configurare l'accesso non autenticato al tuo agente Dialogflow CX Messenger:
- Vai alla console Dialogflow CX.
- Scegli il tuo progetto Google Cloud.
- Seleziona l'agente.
- Seleziona la scheda Gestisci.
- Fai clic su Integrazioni nel menu della barra laterale 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 per riconfigurare le impostazioni nel passaggio successivo.
- Seleziona un ambiente.
- Seleziona API non autenticata.
- Seleziona uno stile.
- Facoltativamente, 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 al tuo agente Dialogflow CX Messenger:
- Vai alla console Dialogflow CX.
- Scegli il tuo progetto Google Cloud.
- Seleziona l'agente.
- Seleziona la scheda Gestisci.
- Fai clic su Integrazioni nel menu della barra laterale 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 per riconfigurare le impostazioni nel passaggio successivo.
- Seleziona un ambiente.
- Seleziona API autorizzata.
- Seleziona uno stile.
- Facoltativamente, 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 per eseguire query sull'agente. Aggiungi ogni utente finale o un gruppo come entità con i ruoli Client API Dialogflow e Service Usage Consumer.
- Crea una schermata per il consenso OAuth per la tua organizzazione.
Aggiungi
Embed
Incolla il codice di incorporamento 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> sul tuo ID client OAuth. Se vuoi utilizzare le identità degli utenti finali per l'autenticazione degli strumenti, imposta l'attributo access-token-name con un nome qualsiasi.
Quindi utilizza il token di connessione con il valore $session.params.ACCESS_TOKEN_NAME per l'autenticazione dello strumento.
Aggiorna tutti gli altri attributi che richiedono un aggiornamento.
Per consentire i layout adattabili, aggiungi anche quanto segue all'elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Personalizzazione
Puoi applicare molte personalizzazioni HTML e personalizzazioni CSS 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
L'esempio seguente 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
Puoi utilizzare molti tipi di risposta di fulfillment per le risposte dell'agente.
Feedback sulla risposta
Se il feedback sulle risposte è abilitato, per impostazione predefinita la finestra di dialogo della chat aggiunge i pulsanti Mi piace e Non mi piace all'interfaccia utente. Durante la conversazione, puoi fare clic su questi pulsanti per fornire un feedback sulle risposte dell'agente. Se fai clic su Non mi piace, puoi facoltativamente fornire un motivo per il feedback negativo.
Componente Feedback personalizzato
Per specificare un elemento di feedback personalizzato, devi 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 localmente:
- Incorpora l'elemento Dialogflow CX Messenger in una pagina come descritto sopra.
- Avvia un server HTTP locale per la pagina con una porta specifica.
- Apri la pagina all'indirizzo
http://localhost:port_number.