如何将对话流与网站集成？
Posted
技术标签:
【中文标题】如何将对话流与网站集成？【英文标题】：How to integrate dialogflow with website? 【发布时间】：2018-12-09 08:05:53 【问题描述】：我使用“Dialogflow 聊天机器人”创建了意图、实体等，现在，我正在尝试将 dialogflow 与我的网站（html）集成，我遵循了 dialogflow 官方网站上的文档说明，但我仍然在困惑，启用网络演示选项后，如何编辑附加图像中的内容以及如何在我的网站中启动聊天机器人？
我按照“https://dialogflow.com/docs/integrations/web-demo”的指示进行操作
谢谢
【问题讨论】：
【参考方案1】：Dialogflow 不提供将代理与您的网站集成的任何直接方式。 正如罗伯特在他的answer 中提到的那样，网络演示集成实际上只是用于演示目的，不能自定义。如果您想在您的网站中集成对话流代理，您有两种选择：
Dialogflow 提供用于集成的 API 和 SDK。您需要将这些 API 集成到您的网站中。您可以参考this article 了解更多信息。
另一种方法是使用任何提供 Dialogflow 集成的第三方工具。在我看来，Kommunicate 通过一组Actionable Messages 提供了流畅的 Dialogflow 集成。这个article 可能对你有帮助。
【讨论】：
【参考方案2】：网络演示集成实际上仅用于演示目的，不可自定义。要使用自定义 UI 与您的网站进行真正的集成，您需要从服务器调用“检测意图”API 并围绕它构建您自己的 UI。
见https://cloud.google.com/dialogflow-enterprise/docs/reference/rest/v2beta1/projects.agent.sessions/detectIntent
【讨论】：
感谢您的回复，其实我有一个网站，我的意图是把对话聊天机器人与那个网站整合起来。我使用对话流创建了代理、意图和实体，所以现在我应该调用“识别意图” API，对吗？如果你不介意，你能解释一下如何使用识别意图吗？谢谢 更新为正确的 api 名称（检测而不是识别）并添加链接 好吧，让我试试……我是初学者，所以我问了这么多问题，抱歉。我还有一个疑问，我正在尝试将对话流与一个网站集成，该网站是用“html 和 js”编写的，是否可以将对话流与该网站集成？ 作为POST请求或cURL请求调用时如何授权请求？ 围绕它构建自己的 UI 需要什么编码语言（HTML+CSS 是否可以）？你会从哪里开始？【参考方案3】：您应该能够自定义网络演示。如果您查看 web-demo 的 html，您会注意到聊天机器人的内容位于 iframe 标记内。 iframe 标记基本上是当前页面内的嵌入页面。您可以将此 iframe 标记的内容与您的项目的 dialogflow scr 代码复制到您的网站并自定义样式和 html。您还可以通过 javascript toggle-class 添加浮动聊天图标，以在单击图标时显示聊天机器人：
<iframe 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&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>
【讨论】：
【参考方案4】：根据所有回复，我自己的结论也说网络演示不是正确的方式......
我们对这种方法的主要兴趣：projects.agent.sessions.detectIntent
首先查看此链接：https://cloud.google.com/dialogflow-enterprise/docs/reference/rest/v2/projects.agent.sessions/detectIntent#QueryInput
在此页面上，查看请求正文，它的参数是QueryInput。在查询输入中，您可以传递文本。然后查看响应正文。作为回应 queryResult 是我们正在寻找的。
还有一点，我们必须使用gRPC API 而不是rest API。
【讨论】：
你有这方面的例子吗？ @poppop 我不再使用 Dialogflow。我打开了 RASA，因为它比 DF 更灵活。【参考方案5】：Support Board 的 Dialogflow 应用程序提供了一个聊天小部件，可以集成到您的 HTML 网站中，并且与 Dialogflow 完全集成。您需要使用插件的 php 版本。
安装后，集成到您的 HTML 页面将需要您插入 js 文件的链接：
<script src="supportboard/js/init.js"></script>
免责声明：我为支持委员会工作
【讨论】：
【参考方案6】：现在您可以使用Dialogflow Messenger、css customizable 和javascript events。
【讨论】：
以上是关于如何将对话流与网站集成？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 REST API 微服务（使用 Express 构建）将 MongoDB 更改流与节点 js 一起使用
如何将 facebook 帐户与 asp.net 网站集成？
如何将 wordpress 博客与网站页眉和页脚设计集成到 php 网站博客页面？