web-dev-qa-db-fra.com

Comment intégrer dialogflow avec le site web?

J'ai créé des intentions, des entités telles et telles en utilisant 'Dialogflow chat-bot', maintenant, j'essaie d'intégrer dialogflow avec mon site Web (html), j'ai suivi les instructions documentées du site officiel de dialogflow, toujours je suis confus, après activer l'option de démonstration Web, comment modifier le contenu à l'intérieur de l'image jointe et comment lancer le chat-bot sur mon site Web?

J'ai suivi les instructions de: " https://dialogflow.com/docs/integrations/web-demo "

Merci

htmlintegrationchatbotdialogflow
8
python_user

Dialogflow ne fournit aucun moyen direct d'intégrer l'agent à votre site Web. Comme robert l'a mentionné dans son réponse L'intégration de la démo Web est vraiment juste à des fins de démonstration et non personnalisable. Si vous souhaitez intégrer l'agent dialogflow dans votre site Web, vous avez deux options:

  1. Dialogflow fournit des API et des SDK pour l'intégration. Vous devez intégrer ces API dans votre site Web. Vous pouvez vous référer à cet article pour plus d'informations à ce sujet.

  2. Une autre façon consiste à utiliser n'importe quel outil tiers qui fournit des intégrations Dialogflow. À mon avis, Kommunicate fournit une intégration fluide de Dialogflow avec un ensemble de Actionable Messages . Cette article pourrait vous être utile.

12
Suraj

L'intégration de la démo Web est vraiment juste à des fins de démonstration et non personnalisable. Pour effectuer une véritable intégration avec votre site Web avec une interface utilisateur personnalisée, vous appelez l'API "detect intention" à partir de votre serveur et créez votre propre interface utilisateur autour de celui-ci.

Voir https://cloud.google.com/dialogflow-enterprise/docs/reference/rest/v2beta1/projects.agent.sessions/detectIntent

5
Robert Levy

Vous devriez pouvoir personnaliser la démo Web. Si vous regardez le html de la démo web, vous remarquerez que le contenu du chatbot est à l'intérieur d'une balise iframe. La balise iframe est essentiellement une page intégrée à votre page actuelle. Vous pouvez copier le contenu de cette balise iframe avec le code scr de dialogflow de votre projet dans votre site Web et personnaliser le style et le code html. Vous pouvez également ajouter une icône de conversation flottante par javascript toggle-class pour afficher le chatbot lorsque vous cliquez sur l'icône:

<iframe height="430" width="350" src="https://bot.dialogflow.com/xxxxxxxxxx">
  #document
  <!DOCTYPE html>
  <html>
    <head>
      <meta name="referrer" content="no-referrer" />
      <title>Small-Talk</title>
      <link
        rel="icon"
        type="image/png"
        href="https://console.dialogflow.com/api-client/assets/img/logo-short.png"
      />

      <meta property="og:title" content="Small-Talk" />
      <meta
        property="og:description"
        content="Allow your app to engage in small talk about a variety of topics."
      />
      <meta property="og:locale" content="en" />
      <meta property="og:image" content="" />

      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <style>
        @-moz-keyframes blink {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        } /* Firefox */
        @-webkit-keyframes blink {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        } /* Webkit */
        @-ms-keyframes blink {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        } /* IE */
        @keyframes blink {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        } /* Opera and prob css3 final iteration */

        #preloader {
          background: #fff;
          position: fixed;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          z-index: 999999;
          opacity: 1;
          filter: alpha(opacity=100);
          -webkit-transition: opacity 500ms ease;
          transition: opacity 500ms ease;
        }

        #preloader .logo {
          display: block;
          width: 109px;
          height: 39px;
          background-repeat: no-repeat;
          background-image: url("https://console.dialogflow.com/api-client/assets/img/[email protected]");
          background-size: contain;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -20px 0 0 -55px;
          -moz-transition: all 1s ease-in-out;
          -webkit-transition: all 1s ease-in-out;
          -o-transition: all 1s ease-in-out;
          -ms-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
          /* order: name, direction, duration, iteration-count, timing-function */
          -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
          -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
          -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
          animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
        }

        noscript h1 {
          padding: 20px;
        }
      </style>
      <!--[if lte IE 7]>
        <script src="https://assets.dialogflow.com/b/dialogflow_ui_20190207_1905_dumbledore_RC01/js/agentDemoApp/promise.min.js"></script>
      <![endif]-->
      <style>
        body {
          margin: 0;
          background: white;
        }
        audio {
          -webkit-transition: all 0.5s linear;
          -moz-transition: all 0.5s linear;
          -o-transition: all 0.5s linear;
          transition: all 0.5s linear;
          -moz-box-shadow: 2px 2px 4px 0px #006773;
          -webkit-box-shadow: 2px 2px 4px 0px #006773;
          box-shadow: 2px 2px 4px 0px #006773;
          -moz-border-radius: 7px 7px 7px 7px;
          -webkit-border-radius: 7px 7px 7px 7px;
          border-radius: 7px 7px 7px 7px;
          float: right;
          margin-right: 15px;
        }
        form {
          margin: 0;
        }
        .b-agent-demo {
          font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 300;
          width: 100%;
          height: auto;
          color: #2b313f;
          font-size: 12px;
          overflow: hidden;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
        .b-agent-demo .user-request,
        .b-agent-demo .server-response {
          display: inline-block;
          padding: 15px 25px;
          border-radius: 3px;
          border: 1px solid #eee;
          margin-bottom: 5px;
          font-size: 16px;
          clear: both;
        }
        .b-agent-demo .user-request.server-response-error,
        .b-agent-demo .server-response.server-response-error {
          background-color: #f76949;
        }
        .b-agent-demo .user-request {
          background-color: #efefef;
          float: left;
          margin-right: 15px;
          margin-top: 15px;
          margin-left: 15px;
        }
        .b-agent-demo .server-response {
          color: #ffffff;
          background-color: #a5d175;
          float: right;
          margin-top: 15px;
          margin-right: 15px;
          margin-left: 15px;
        }
        .b-agent-demo .b-agent-demo_result {
          overflow-y: auto;
          background: white;
          position: fixed;
          top: 110px;
          bottom: 55px;
          width: 100%;
        }
        .b-agent-demo .b-agent-demo_result-table {
          height: 100%;
          min-height: 100%;
          width: 100%;
        }
        .b-agent-demo .b-agent-demo_result-table td {
          vertical-align: bottom;
        }
        .b-agent-demo .b-agent-demo_header {
          min-height: 80px;
          height: 80px;
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100%;
          background-color: #2b303e;
          display: table;
        }
        .b-agent-demo .b-agent-demo_header-wrapper {
          display: table-cell;
          vertical-align: middle;
        }
        .b-agent-demo .b-agent-demo_header-icon {
          position: absolute;
          top: 20px;
          left: 20px;
          width: 40px;
          height: 40px;
          border-radius: 100%;
          /*background-color: @response-color;*/
          overflow: hidden;
          vertical-align: middle;
          text-align: center;
        }
        .b-agent-demo .b-agent-demo_header-icon img {
          max-height: 100%;
          max-width: 100%;
          width: auto;
          height: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          border: 0;
          margin: auto;
        }
        .b-agent-demo .b-agent-demo_header-agent-name {
          padding-left: 80px;
          font-size: 18px;
          color: #ffffff;
        }
        .b-agent-demo .b-agent-demo_header-description {
          color: #b7bbc4;
          padding-left: 80px;
          padding-top: 7px;
          font-size: 12px;
          display: block;
          /* Fallback for non-webkit */
          display: -webkit-box;
          max-height: 24px;
          /* Fallback for non-webkit */
          margin: 0 auto;
          line-height: 1;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: Ellipsis;
        }
        .b-agent-demo .b-agent-demo_input {
          position: fixed;
          bottom: 0;
          height: 55px;
          border-top: 1px solid lightgray;
          background-color: white;
          width: 100%;
        }
        .b-agent-demo #agentDemoForm {
          display: block;
          margin-left: 15px;
          margin-right: 55px;
        }
        .b-agent-demo #query {
          width: 100%;
          border: 0;
          font-size: 16px;
          font-weight: 300;
          margin: 0;
          height: 55px;
        }
        .b-agent-demo #query:focus {
          outline: none;
          outline-offset: 0;
        }
        .b-agent-demo .b-agent-demo_input-microphone {
          display: none;
          position: absolute;
          font-size: 20px;
          width: 54px;
          height: 54px;
          right: 0;
          bottom: 0;
          cursor: pointer;
          text-align: center;
          /* line-height: 30px; */
          line-height: 54px;
          background: white;
          color: #b7bbc4;
        }
        .b-agent-demo .b-agent-demo_input-microphone.active {
          color: #f76949;
        }
        .b-agent-demo .b-agent-demo_powered_by {
          position: fixed;
          left: 0;
          right: 0;
          top: 80px;
          height: 30px;
          background-color: #f8f8f8;
          vertical-align: middle;
        }
        .b-agent-demo .b-agent-demo_powered_by span {
          color: #b7bbc4;
          text-transform: uppercase;
          float: right;
          vertical-align: middle;
          line-height: 20px;
          margin-top: 5px;
          margin-right: 10px;
          font-size: 10px;
          margin-left: -10px;
        }
        .b-agent-demo .b-agent-demo_powered_by img {
          margin-top: 7px;
          height: 16px;
          margin-right: 20px;
          float: right;
          vertical-align: middle;
          border: 0;
        }
        .clearfix {
          clear: both;
        }
      </style>
    </head>
    <body>
      <div id="preloader" style="opacity: 0; display: none;">
        <noscript>
          <h1>This application does'not work without javascript</h1>
        </noscript>
        <div class="logo"></div>
      </div>

      <div class="b-agent-demo">
        <div class="b-agent-demo_header">
          <div class="b-agent-demo_header-icon">
            <div class="b-agent-demo_header-icon-align-helper">
              <img
                id="agent-avatar"
                src="https://www.gstatic.com/dialogflow-console/common/assets/img/logo-short.png"
                srcset="
                  https://console.dialogflow.com/api-client/assets/img/logo-short.png 2x,
                  https://console.dialogflow.com/api-client/assets/img/logo-short.png 1x
                "
              />
            </div>
          </div>
          <div class="b-agent-demo_header-wrapper">
            <div class="b-agent-demo_header-agent-name">Small-Talk</div>
            <div class="b-agent-demo_header-description">
              Allow your app to engage in small talk about a variety of topics.
            </div>
          </div>
        </div>
        <div class="b-agent-demo_powered_by">
          <a href="https://dialogflow.com" target="_blank">
            <img
              src="https://console.dialogflow.com/api-client/assets/img/logo-black.png"
            />

            <span>Powered by</span>
          </a>
        </div>
        <div class="b-agent-demo_result" id="resultWrapper">
          <table class="b-agent-demo_result-table">
            <tbody>
              <tr>
                <td id="result"></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="clearfix"></div>
        <div class="b-agent-demo_input">
          <form id="agentDemoForm">
            <input
              type="text"
              name="q"
              id="query"
              placeholder="Ask something..."
            />
            <i
              class="b-agent-demo_input-microphone material-icons-extended"
              id="mic"
              style="display: block;"
              >mic</i
            >

            <!--div class="b-agent-demo_input-microphone material-icons-extended mic-black" id="mic"></div-->
          </form>
        </div>
      </div>

      <script>
        AGENT_LANGUAGE = "en";
        AGENT_AVATAR_ID = "";
        SERVICE_BASE_URL = "https://console.dialogflow.com/api-client/";

        // non-blocking CSS delivery

        var loadDeferredStyles = function() {
          var addStylesNode = document.getElementById("deferred-styles");
          var replacement = document.createElement("div");
          replacement.innerHTML = addStylesNode.textContent;
          document.body.appendChild(replacement);
          addStylesNode.parentElement.removeChild(addStylesNode);
        };

        var raf =
          window.requestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.msRequestAnimationFrame;

        if (raf) {
          raf(function() {
            window.setTimeout(loadDeferredStyles, 0);
          });
        } else {
          window.addEventListener("load", loadDeferredStyles);
        }

        window["addStyleString"] = function(str) {
          var node = document.createElement("style");
          node.innerHTML = str;
          document.head.appendChild(node);
        };
      </script>
      <script
        defer=""
        src="https://assets.dialogflow.com/b/dialogflow_ui_20190207_1905_dumbledore_RC01/js/bundles/agentDemo.bundle.min.js"
      ></script>
      <!-- Google Analytics -->
      <script>
        window.ga =
          window.ga ||
          function() {
            (ga.q = ga.q || []).Push(arguments);
          };
        ga.l = +new Date();
        ga("create", "UA-50971730-1", "auto");
        ga("send", "pageview");
      </script>
      <script
        async=""
        src="https://www.google-analytics.com/analytics.js"
      ></script>

      <div>
        <link
          href="https://fonts.googleapis.com/css?family=Roboto:400,300&amp;subset=latin,cyrillic"
          rel="stylesheet"
          type="text/css"
        />
        <link
          href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended"
          rel="stylesheet"
        />
        <link
          href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css"
          rel="stylesheet"
          type="text/css"
        />
      </div>
    </body>
  </html>
</iframe>
3
ttfreeman

Selon toutes les réponses, ma propre conclusion dit également que la démo Web n'est pas une bonne façon ...

Notre principal intérêt pour cette méthode: projects.agent.sessions.detectIntent

Consultez d'abord ce lien: https://cloud.google.com/dialogflow-enterprise/docs/reference/rest/v2/projects.agent.sessions/detectIntent#QueryInput

Sur cette page, consultez Corps de la demande et c'est param QueryInput. Dans la saisie de requête, vous pouvez passer du texte. Et puis vérifiez Corps de réponse . En réponse, queryResult est ce que nous recherchons.

Une autre chose est que nous devons utiliser gRPC API plutôt que rest API.

1
shivang patel