Solución:
Dialogflow no proporciona ninguna forma directa de integrar el agente con su sitio web. Como Robert mencionó en su respuesta, la integración de la demostración web realmente es solo para fines de demostración y no se puede personalizar. Si desea integrar el agente de dialogflow en su sitio web, tiene dos opciones:
-
Dialogflow proporciona API y SDK para la integración. Necesita integrar estas API en su sitio web. Puede consultar este artículo para obtener más información al respecto.
-
Otra forma es utilizar cualquier herramienta de terceros que proporcione integraciones de Dialogflow. En mi opinión, Kommunicate proporciona una integración fluida de Dialogflow con un conjunto de mensajes procesables. Este artículo puede resultarle útil.
La integración de la demostración web en realidad es solo para fines de demostración y no se puede personalizar. Para hacer una integración real con su sitio web con una interfaz de usuario personalizada, llame a la API de “detección de intención” desde su servidor y cree su propia interfaz de usuario a su alrededor.
Ver https://cloud.google.com/dialogflow-enterprise/docs/reference/rest/v2beta1/projects.agent.sessions/detectIntent
Debería poder personalizar la demostración web. Si observa el html de la demostración web, notará que el contenido del chatbot está dentro de una etiqueta iframe. La etiqueta iframe es básicamente una página incrustada dentro de su página actual. Puede copiar el contenido de esta etiqueta iframe con el código scr de dialogflow de su proyecto en su sitio web y personalizar el estilo y el html. También puede agregar un ícono de chat flotante mediante javascript toggle-class para mostrar el chatbot cuando se hace clic en el ícono:
<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>
<noscript>
<h1>This application does'not work without javascript</h1>
</noscript>
<div></div>
</div>
<div>
<div>
<div>
<div>
<img
src="https://www.gstatic.com/dialogflow-console/common/assets/img/logo-short.png"
/>
</div>
</div>
<div>
<div>Small-Talk</div>
<div>
Allow your app to engage in small talk about a variety of topics.
</div>
</div>
</div>
<div>
<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>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div></div>
<div>
<form>
<input
type="text"
name="q"
placeholder="Ask something..."
/>
<i
>mic</i
>
<!--div></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>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)