Dialogflow Messenger

Questa integrazione fornisce una finestra di dialogo di chat personalizzabile per il tuo agente che possono essere incorporate nel tuo sito web.

Screenshot di Dialogflow Messenger

Configurazione

Questa integrazione può consentire sia quelli autenticati che quelli non autenticati l'accesso alle query dello user agent finale.

Configurazione non autenticata

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

  1. Vai alla console Dialogflow CX.
  2. Scegli il progetto Google Cloud.
  3. Seleziona l'agente.
  4. Seleziona la scheda Gestisci.
  5. Fai clic su Integrations (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 il codice HTML incorporabile. A prescindere dal fatto che tu voglia sapere cosa deve essere autenticato o meno, fai clic sul pulsante Disattiva... nella parte inferiore della finestra di dialogo, quindi potrai riconfigurare le impostazioni nel passaggio successivo.
  9. Seleziona un Ambiente.
  10. Seleziona API non autenticata.
  11. Seleziona uno stile.
  12. Se vuoi, puoi limitare l'accesso al dominio.
  13. Fai clic su Abilita l'API non autenticata.
  14. La finestra di dialogo mostra il codice HTML incorporabile che possono essere incorporati nel tuo 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 progetto Google Cloud.
  3. Seleziona l'agente.
  4. Seleziona la scheda Gestisci.
  5. Fai clic su Integrations (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 il codice HTML incorporabile. A prescindere dal fatto che tu voglia sapere cosa deve essere autenticato o meno, fai clic sul pulsante Disattiva... nella parte inferiore della finestra di dialogo, quindi potrai riconfigurare le impostazioni nel passaggio successivo.
  9. Seleziona un Ambiente.
  10. Seleziona API autorizzata.
  11. Seleziona uno stile.
  12. Se vuoi, puoi limitare l'accesso al dominio.
  13. Fai clic su Abilita l'API autorizzata.
  14. Nella finestra di dialogo viene visualizzato il codice HTML incorporabile che possono essere incorporati nel tuo sito web. Copia questo codice.
  15. Fai clic su Fine.
  16. Configura il client OAuth:
    1. Creare 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, specificare le origini HTTP autorizzate a ospitare ed eseguire query sull'agente. Ad esempio: https://your-company.com.
    3. Concedi agli utenti finali l'autorizzazione per inviare query all'agente. Aggiungi ogni utente finale o un gruppo come entità con il client API Dialogflow e Service Usage Consumer ruoli.

Embed

Incolla il codice di incorporamento copiato in precedenza in una pagina web del tuo sito web. Gli elementi HTML <script> e <df-messenger> deve trovarsi nell'elemento <body> della pagina.

Se utilizzi un'integrazione autenticata, imposta l'attributo oauth-client-id per <df-messenger> all'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 molti Personalizzazioni HTML e Personalizzazioni CSS che puoi applicare per modificare l'aspetto e il 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 personalizzazione dell'HTML, 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 risposta di fulfillment che puoi utilizzare per le risposte dell'agente.

Rispondi al feedback

Se è attivo il feedback sulla risposta, per impostazione predefinita nella finestra di dialogo della chat verrà aggiunto un 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, possono eventualmente 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.