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
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:
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.
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.
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.
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&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>
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.
The Dialogflow App of Support Board provides a chat widget that can be integrated into your HTML website and it's fully integrated with Dialogflow. You will need to use the PHP version of the plugin.
After the installation, the integration into your HTML pages will require you insert a link to a js file:
<script src="supportboard/js/init.js"></script>
Disclaimer: I work for Support Board
Now you can with Dialogflow Messenger, css customizable and javascript events.
