How to integrate dialogflow with website?
25,694
Solution 1
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.
Solution 2
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.
Solution 3
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/[email protected]");
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>
Solution 4
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
Solution 5
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.
Author by
dev_user
Updated on July 09, 2022Comments
-
dev_user almost 2 years
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
-
dev_user almost 6 yearsThank you for the response, Actually I have one website, my intention is, to integrate dialogue chat-bot with that website.I created agent,intent and entities using dialogflow, So now i should call "recognize intent" API , am I right? If you don't mind, can you explain how to use recognize intent? Thank you
-
Robert Levy almost 6 yearsupdated to correct api name (detect instead of recognize) and add link
-
dev_user almost 6 yearsok let me try.....I'm a beginner that's why I'm asking so many questions, sorry. I have one more doubt, I'm trying to integrate dialog-flow with one website, that website is scripted in "html and js", Is it possible to integrate dialog-flow with that website?
-
sid8491 almost 6 yearshow to authorize the request when calling as a POST request or cURL request? -
aaronth07 over 5 yearsWhat coding language would you need to build your own UI around it (would HTML+CSS be ok for it)? Where would you begin? -
shivang patel about 5 yearsIn that link, check outqueryInputparameter in request field and then in response fieldfulfillmentMessages[]. Check out both parameters description and you can easily understand how you can implement in your own chat application. But we should use gRPC rather then restAPI. -
poppop almost 5 yearsdid u have example for this ?
-
shivang patel almost 5 years@poppop I am no longer working on Dialogflow. I was switched on RASA, because it's more flexible then DF.
-
user5214530 about 3 yearsThis is actually most useful comment of all. Upvoted.
