How to integrate dialogflow with website?

后端未结
关注
 6  1702
星月不相逢 2021-02-04 05:35
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
6条回答
忘了有多久 (楼主)
2021-02-04 05:59
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:

  #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>
0 讨论(0)
查看其它6个回答