如何将dialogflow与网站集成？

Question

我使用 'Dialogflow chat-bot' 创建了意图、某某实体，现在，我正在尝试将 dialogflow 与我的网站集成 (html)，我遵循了 dialogflow 官方网站上的文档说明，我仍然很困惑，启用网络演示选项后，如何编辑附加图像中的内容以及如何在我的网站上启动聊天机器人？

我遵循了以下说明：“https://dialogflow.com/docs/integrations/web-demo”

谢谢

Answer 1

Web 演示集成确实仅用于演示目的，不可自定义。要使用自定义 UI 与您的网站进行真正的集成，您可以从您的服务器调用“检测意图”API 并围绕它构建您自己的 UI。

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

Answer 2

Dialogflow 不提供任何将代理与您的网站集成的直接方式。正如罗伯特在他的中提到的，Web 演示集成实际上仅用于演示目的，不可自定义。如果您想在您的网站中集成 dialogflow 代理，您有两个选择：

Dialogflow 提供用于集成的 API 和 SDK。您需要将这些 API 集成到您的网站中。您可以参考 this article 了解更多信息。
另一种方法是使用提供 Dialogflow 集成的任何第三方工具。在我看来，Kommunicate provides smooth Dialogflow Integration with a set of Actionable Messages. This article 可能对您有所帮助。

Answer 3

您应该能够自定义网络演示。如果您查看网络演示的 html，您会注意到聊天机器人的内容位于 iframe 标记内。 iframe 标记基本上是当前页面中的嵌入页面。您可以将此 iframe 标签的内容与项目的 dialogflow scr 代码一起复制到您的网站中，并自定义样式和 html。您还可以通过 javascript toggle-class 添加浮动聊天图标，以便在单击图标时显示聊天机器人：

<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/logo@2x-black.png");
          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>

Answer 4

根据所有回复，我自己的结论也表明网络演示不是正确的方式...

我们对这种方法的主要兴趣：projects.agent.sessions.detectIntent

先看看这个 link ：https://cloud.google.com/dialogflow-enterprise/docs/reference/rest/v2/projects.agent.sessions/detectIntent#QueryInput

在此页面上，查看 请求正文 及其参数 QueryInput。在查询输入中，您可以传递文本。然后查看 响应正文 。作为回应 queryResult 就是我们要找的。

还有一件事是，我们必须使用 gRPC API 而不是 rest API.

Answer 5

Support Board 的 Dialogflow 应用程序提供了一个可以集成到您的 HTML 网站的聊天小部件，它与 Dialogflow 完全集成。您将需要使用插件的 PHP 版本。

安装后，要集成到您的 HTML 页面中，需要您将 link 插入 js 文件：

<script src="supportboard/js/init.js"></script>

免责声明：我为支持委员会工作

Answer 6

现在您可以 Dialogflow Messenger, css customizable and javascript events.

如何将dialogflow与网站集成？

How to integrate dialogflow with website?

html

integration

chatbot

dialogflow-es