How to integrate dialogflow with website?

2019-05-11 14:36发布

站内问答 / 后端开发
802 4 5

I created Intents, entities so and so using 'Dialogflow chat-bot', Now,I'm trying to integrate dialogflow with my website(html), I followed the documented instructions from the dialogflow official website, still I'm confused , after enabling the web demo option,How to edit the contents inside the attached image and how to launch chat-bot in my website?

I followed instructions from "https://dialogflow.com/docs/integrations/web-demo"

Thank you

4条回答
你好瞎i
2楼-- · 2019-05-11 14:44

Dialogflow doesn't provide any direct way to integrate the agent with your website. As robert mentioned in his answer The web demo integration really is just for demo purposes and not customizable. If You want to integrate dialogflow agent in your website you have two options:

  1. Dialogflow provides APIs and SDKs for integration. You need to integrate these APIs in your website. You can refer to this article for more information on this.

  2. Another way is to use any third party tool which provides Dialogflow integrations. In my opinion, Kommunicate provides smooth Dialogflow Integration with a set of Actionable Messages. This article might be helpful for you.

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
3楼-- · 2019-05-11 14:45

The web demo integration really is just for demo purposes and not customizable. To do a real integration with your website with custom UI, you call the “detect intent” API from your server and build your own UI around it.

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

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
4楼-- · 2019-05-11 14:50

You should be able to customize the web-demo. If you look at the html of the web-demo you will notice that the content of the chatbot is inside an iframe tag. The iframe tag is basically an embedded page inside your current page. You can copy the content of this iframe tag with your project's dialogflow scr code into your website and customoze the style and html. You can also add a floating chat icon by javascript toggle-class to display the chatbot when the icon is clicked: 

<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>
查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
5楼-- · 2019-05-11 14:53

As per all response, my own conclusion also says that web demo is not a right way...

Our main interest in this method : projects.agent.sessions.detectIntent

Check out this link first : https://cloud.google.com/dialogflow-enterprise/docs/reference/rest/v2/projects.agent.sessions/detectIntent#QueryInput

On this page, check out Request body and it's param QueryInput. In query input you can pass text. And then check out Response body. In response queryResult is what we are looking for.

One more thing is, we must use gRPC API rather then rest API.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)