Dialogflow Messenger

Questa integrazione fornisce una finestra di dialogo di chat personalizzabile per il tuo agente che può essere incorporata nel tuo sito web.

Screenshot di Dialogflow Messenger

Configurazione

Questa integrazione può consentire l'accesso alle query allo user agent finale autenticato o non autenticato.

Configurazione non autenticata

Per configurare l'accesso non autenticato all'agente Dialogflow Messenger:

  1. Vai alla console Dialogflow CX.
  2. Scegli il tuo progetto Google Cloud.
  3. Seleziona l'agente.
  4. Seleziona la scheda Gestisci.
  5. Fai clic su Integrazioni nel menu della barra laterale sinistra.
  6. Fai clic su Connetti in Dialogflow Messenger.
  7. Si apre una finestra di dialogo di configurazione.
  8. Se l'integrazione è stata configurata in precedenza per questo agente, vedrai un codice HTML incorporabile. Indipendentemente dal fatto che tu voglia eseguire l'autenticazione o meno, fai clic sul pulsante Disattiva... nella parte inferiore della finestra di dialogo per riconfigurare le impostazioni nel passaggio successivo.
  9. Seleziona un Ambiente.
  10. Seleziona API non autenticata.
  11. Seleziona uno stile.
  12. Facoltativamente, limita l'accesso al dominio.
  13. Fai clic su Abilita l'API non autenticata.
  14. Nella finestra di dialogo viene mostrato il codice HTML incorporabile che può essere incorporato nel sito web. Copia questo codice.
  15. Fai clic su Fine.

Configurazione autenticata

Per configurare l'accesso autenticato all'agente Dialogflow Messenger:

  1. Vai alla console Dialogflow CX.
  2. Scegli il tuo progetto Google Cloud.
  3. Seleziona l'agente.
  4. Seleziona la scheda Gestisci.
  5. Fai clic su Integrazioni nel menu della barra laterale sinistra.
  6. Fai clic su Connetti in Dialogflow Messenger.
  7. Si apre una finestra di dialogo di configurazione.
  8. Se l'integrazione è stata configurata in precedenza per questo agente, vedrai un codice HTML incorporabile. Indipendentemente dal fatto che tu voglia eseguire l'autenticazione o meno, fai clic sul pulsante Disattiva... nella parte inferiore della finestra di dialogo per riconfigurare le impostazioni nel passaggio successivo.
  9. Seleziona un Ambiente.
  10. Seleziona API autorizzata.
  11. Seleziona uno stile.
  12. Facoltativamente, limita l'accesso al dominio.
  13. Fai clic su Abilita l'API autorizzata.
  14. Nella finestra di dialogo viene mostrato il codice HTML incorporabile che può essere incorporato nel sito web. Copia questo codice.
  15. Fai clic su Fine.
  16. Configura il client OAuth:
    1. Crea una schermata per il consenso OAuth per la tua organizzazione. Aggiungi ./auth/cloud-platform come ambito obbligatorio.
    2. 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.
    3. Fornisci agli utenti finali l'autorizzazione per eseguire query sull'agente. Aggiungi ogni utente finale o un gruppo come entità con il ruolo Client API Dialogflow.

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.

Aggiorna tutti gli altri attributi che devono essere aggiornati.

Per consentire i 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

L'esempio seguente mostra la personalizzazione HTML e 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 risposta di evasione che puoi utilizzare per le risposte degli agenti.

Rispondi a feedback

Se il feedback sulle risposte è abilitato, per impostazione predefinita nella finestra di dialogo della chat verranno aggiunti i pulsanti Mi piace e Non mi piace all'interfaccia utente. Durante la conversazione, l'utente finale può fare clic su questi pulsanti per fornire un feedback sulle risposte degli agenti. Se l'utente seleziona Non mi piace, può facoltativamente fornire un motivo per il feedback negativo.

Componente Feedback personalizzato

Per specificare un elemento di feedback personalizzato, è necessario definire un nuovo elemento personalizzato nel 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 Messenger in locale:

  • Incorpora l'elemento Dialogflow Messenger in una pagina come descritto sopra.
  • Avvia un server HTTP locale per quella pagina con una porta specifica.
  • Accedi alla pagina all'indirizzo http://localhost:port_number.