Cette page a été traduite par l'API Cloud Translation.

Dialogflow Messenger

Cette intégration fournit une boîte de dialogue de chat personnalisable pour votre agent qui peuvent être intégrées à votre site Web.

Capture d'écran de Dialogflow Messenger

Configuration

Cette intégration peut autoriser ou non l'accès aux requêtes du user-agent final.

Configuration non authentifiée

Pour configurer un accès non authentifié à votre agent Dialogflow Messenger:

Accéder à la console Dialogflow CX
Choisissez votre projet Google Cloud.
Sélectionnez votre agent.
Sélectionnez l'onglet Gérer.
Cliquez sur Integrations (Intégrations) dans le menu de la barre latérale gauche.
Cliquez sur Se connecter dans Dialogflow Messenger.
Une boîte de dialogue de configuration s'ouvre.
Si l'intégration a déjà été configurée pour cet agent, vous pouvez voir du code HTML intégrable. Que vous souhaitiez ce qui est authentifié ou non, cliquez sur le bouton Désactiver en bas de la boîte de dialogue. Vous pourrez donc reconfigurer les paramètres à l'étape suivante.
Sélectionnez un environnement.
Sélectionnez Unauthenticated API (API non authentifiée).
Sélectionnez un style.
Si vous le souhaitez, vous pouvez restreindre l'accès au domaine.
Cliquez sur Activer l'API non authentifiée.
La boîte de dialogue affiche le code HTML intégrable. qui peuvent être intégrées à votre site Web. Copiez ce code.
Cliquez sur OK.

Configuration avec authentification

Pour configurer l'accès authentifié à votre agent Dialogflow Messenger:

Accéder à la console Dialogflow CX
Choisissez votre projet Google Cloud.
Sélectionnez votre agent.
Sélectionnez l'onglet Gérer.
Cliquez sur Integrations (Intégrations) dans le menu de la barre latérale gauche.
Cliquez sur Se connecter dans Dialogflow Messenger.
Une boîte de dialogue de configuration s'ouvre.
Si l'intégration a déjà été configurée pour cet agent, vous pouvez voir du code HTML intégrable. Que vous souhaitiez ce qui est authentifié ou non, cliquez sur le bouton Désactiver en bas de la boîte de dialogue. Vous pourrez donc reconfigurer les paramètres à l'étape suivante.
Sélectionnez un environnement.
Sélectionnez API autorisée.
Sélectionnez un style.
Si vous le souhaitez, vous pouvez restreindre l'accès au domaine.
Cliquez sur Activer l'API autorisée.
La boîte de dialogue affiche le code HTML intégrable. qui peuvent être intégrées à votre site Web. Copiez ce code.
Cliquez sur OK.
Configurez le client OAuth: <ph type="x-smartling-placeholder">
1. Créer un écran de consentement OAuth pour votre organisation. Ajoutez ./auth/cloud-platform comme champ d'application requis.
2. Créez un ID client OAuth 2.0. Sous Origines JavaScript autorisées : spécifier les origines HTTP autorisées à héberger et à interroger votre agent. Exemple : https://your-company.com.
3. Autorisez les utilisateurs finaux à interroger votre agent. Ajoutez chacun de vos utilisateurs finaux ou un groupe en tant que compte principal avec le client de l'API Dialogflow ; et Consommateur de Service Usage de rôles.

Intégrer

Collez le code d'intégration que vous avez copié ci-dessus dans une page Web de votre site Web. Les éléments HTML <script> et <df-messenger> doivent se trouver dans l'élément <body> de votre page.

Si vous utilisez une intégration authentifiée, définissez l'attribut oauth-client-id pour <df-messenger> à votre ID client OAuth.

Mettez à jour tout autre attribut qui nécessite une mise à jour.

Pour permettre les mises en page réactives, Ajoutez également le code suivant à votre élément <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Personnalisation

Il existe de nombreux Personnalisations HTML et Personnalisations CSS que vous pouvez appliquer pour modifier l'apparence et le comportement de la boîte de dialogue de chat.

JavaScript

Il existe de nombreux Événements JavaScript et Fonctions JavaScript que vous pouvez utiliser pour interagir avec la boîte de dialogue de chat.

Exemple

L'exemple suivant montre la personnalisation HTML, Personnalisation CSS et 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

Il existe de nombreux types de réponses de fulfillment que vous pouvez utiliser pour les réponses de l'agent.

Commentaires sur la réponse

Si l'option Répondre à des commentaires est activée, la boîte de dialogue du chat ajoutera par défaut la mention "J'aime" . et "Je n'aime pas" à l'interface utilisateur. Pendant la conversation, Un utilisateur final peut cliquer sur ces boutons pour donner son avis sur les réponses de l'agent. Si l'utilisateur sélectionne "Je n'aime pas", il peut éventuellement fournir une raison pour la rétroaction négative.

Composant "Commentaires personnalisés"

Pour spécifier un élément de commentaire personnalisé, vous devez définir un nouvel élément personnalisé sur le site Web. Pour que vous puissiez envoyer les commentaires, l'élément doit émettre un événement df-custom-submit-feedback-clicked. Le champ detail contenu doit être une chaîne.

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);
})();

Débogage

Pour tester votre agent avec Dialogflow Messenger en local, procédez comme suit :

Intégrez l'élément Dialogflow Messenger dans une page, comme décrit ci-dessus.
Démarrez un serveur HTTP local pour cette page avec un port spécifique.
Accédez à cette page à l'adresse http://localhost:port_number.