La integración de Dialogflow Messenger proporciona un cuadro de diálogo de chat personalizable para tu agente que se puede insertar en un sitio web. El cuadro de chat se implementa como una ventana de diálogo que el usuario final puede abrir y cerrar. Cuando se abre, el cuadro de chat aparece sobre el contenido en la parte inferior derecha de la pantalla.
Limitaciones
Esta integración solo admite el idioma predeterminado del agente.
Configuración y prueba
Para configurar y habilitar Dialogflow Messenger, sigue estos pasos:
- Ve a la consola de Dialogflow ES.
- Haz clic en Integrations, en el menú de la barra lateral izquierda.
- Haz clic en Dialogflow Messenger.
- Se abrirá un cuadro de diálogo de configuración.
- Selecciona un entorno.
- Haz clic en Habilitar.
- Copia el código de inserción para pegarlo en tu sitio web.
- Haz clic en Probar ahora para probar tu agente.
- En la esquina inferior derecha de la ventana, aparece un botón con el logotipo de Dialogflow. Haz clic en este botón.
- Se abrirá un cuadro de diálogo de chat con el que podrás interactuar.
- Cierra el cuadro de chat cuando hayas terminado la prueba.
- Haz clic en Cerrar en el cuadro de diálogo de configuración.
Inserción
Pega el código de inserción que copiaste antes en una página web de tu sitio web.
Los elementos HTML <script> y <df-messenger> deben estar en el elemento <body> de la página.
Para generar diseños con capacidad de respuesta, agrega lo siguiente a tu página:
<meta name="viewport" content="width=device-width, initial-scale=1">
Personalizaciones de HTML
Puedes personalizar varios aspectos sobre cómo aparece y se comporta el cuadro de diálogo de chat.
El elemento HTML df-messenger tiene los siguientes atributos:
| Atributo | Política de entrada | Valor |
|---|---|---|
agent-id |
Obligatorio | El ID del agente asociado con el agente de Dialogflow. Se propaga antes con el ID de tu agente. |
chat-icon |
Opcional | El ícono que se usa en el botón para abrir el cuadro de diálogo de chat. El ícono de Dialogflow es el predeterminado. Este campo debe ser una URL pública. El tamaño del ícono debe ser de 36 píxeles por 36 píxeles. |
chat-title |
Requeridos | El título que se muestra en la parte superior del cuadro de diálogo de chat. Se propaga antes con el nombre de tu agente. |
expand |
Opcional | Atributo booleano que configura el cuadro de diálogo de chat para que se abra cuando se cargue la página. De forma predeterminada, el cuadro de chat se cierra cuando se carga la página. |
intent |
Opcional | El evento que se usa para activar el primer intent cuando se abre el cuadro de diálogo de chat. Se propaga antes con el evento WELCOME. |
language-code |
Obligatorio | Código de idioma predeterminado para el primer intent. Se propaga antes con el idioma predeterminado del agente. |
session-id |
Opcional | Un ID de sesión. Si no se proporciona, la integración generará un ID único para cada cuadro de diálogo de chat. |
user-id |
Opcional | Se puede usar para realizar un seguimiento de un usuario en todas las sesiones. Puedes pasar el valor a Dialogflow a través del campo queryParams.payload.userId en una solicitud de intent de detección. |
wait-open |
Opcional | Atributo booleano que retrasa el evento de bienvenida hasta que se abre el cuadro de diálogo de chat. |
Personalizaciones de CSS
Puedes personalizar el estilo de tu cuadro de chat si estableces las variables de CSS.
Se pueden proporcionar las siguientes variables de CSS:
| Variable de CSS | Propiedad afectada |
|---|---|
df-messenger-bot-message |
El color de fondo de la burbuja para los mensajes del agente |
df-messenger-button-titlebar-color |
El color del botón flotante y de la barra de título del cuadro de chat |
df-messenger-button-titlebar-font-color |
El color de fuente del título en la barra de título |
df-messenger-chat-background-color |
El color de fondo del cuadro de chat |
df-messenger-font-color |
El color de fuente para los mensajes |
df-messenger-input-box-color |
El color de fondo de la casilla de entrada de texto |
df-messenger-input-font-color |
El color de fuente para la casilla de entrada de texto |
df-messenger-input-placeholder-font-color |
El color de fuente para el texto del marcador de posición en la casilla de entrada de texto |
df-messenger-minimized-chat-close-icon-color |
El color del ícono de cierre en la vista del chat cerrado |
df-messenger-send-icon |
El color del ícono de envío en la casilla de entrada de texto |
df-messenger-user-message |
El color de fondo de la burbuja para los mensajes del usuario |
Código de ejemplo:
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #df9b56;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
La configuración anterior tendrá como resultado lo siguiente:
Eventos de JavaScript
Dialogflow Messenger activa una variedad de eventos para los que puedes crear objetos de escucha de eventos.
El objetivo del evento para estos eventos es el elemento df-messenger.
Si deseas agregar un objeto de escucha de eventos al elemento df-messenger, agrega el siguiente código JavaScript, en el que event-type es uno de los nombres de eventos que se describen a continuación:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
// Handle event
...
});
Se admiten los siguientes tipos de eventos:
df-accordion-clicked
Este evento ocurre cuando un usuario hace clic en un elemento de acordeón. La estructura del evento tiene el siguiente aspecto:
element: {
title: string,
subtitle: string,
image: {
src: {rawUrl: string}
},
text: string
}
df-button-clicked
Este evento ocurre cuando un usuario hace clic en un elemento de botón. La estructura del evento tiene el siguiente aspecto:
element: {
icon: {
type: string,
color: string
},
text: string,
link: string,
event: EventInput,
payload: {}
}
df-chip-clicked
Este evento ocurre cuando un usuario selecciona un chip de sugerencias. La estructura del evento tiene el siguiente aspecto:
query: string // Text of the suggestion chip that was selected.
df-info-card-clicked
Este evento ocurre cuando el usuario final hace clic en el elemento de información en la barra de título. La estructura del evento tiene el siguiente aspecto:
element: {
title: string,
image: {
src: {rawUrl: string}
},
actionLink: string
}
df-list-element-clicked
Este evento ocurre cuando un usuario hace clic en un elemento de lista. La estructura del evento tiene el siguiente aspecto:
element: {
title: string,
subtitle: string,
image: {
src: {rawUrl}
},
event: {
name: string,
parameters: {},
languageCode: string
},
payload: {}
}
df-messenger-error
Este evento ocurre cuando la API de Dialogflow envía un código de estado de error. La estructura del evento tiene el siguiente aspecto:
error: {
"error": {
"code": <error_code>,
"message": <error_message>,
"status": <error_status>
}
}
df-messenger-loaded
Este evento se activa cuando el elemento df-messenger está cargado por completo y ya inicializado.
df-request-sent
Este evento ocurre cuando se realiza una solicitud a la API de Dialogflow.
Este evento, junto con df-response-received, se puede usar para supervisar la latencia de la solicitud.
La estructura del evento tiene el siguiente aspecto:
requestBody: {
"queryParams": {
object(QueryParameters)
},
"queryInput": {
object(QueryInput)
},
"inputAudio": string
}
df-response-received
Este evento ocurre cuando se recibe una respuesta de la API de Dialogflow. La estructura del evento tiene el siguiente aspecto:
response: detectIntentResponse
df-user-input-entered
Este evento ocurre cuando el usuario final ingresa una consulta. La estructura del evento tiene el siguiente aspecto:
input: string // Text entered by user
Funciones de JavaScript
El elemento df-messenger proporciona funciones a las que puedes llamar para modificar su comportamiento.
renderCustomText
Esta función procesa un mensaje de texto simple, como si viniera de Dialogflow como respuesta de texto simple.
Por ejemplo:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');
renderCustomCard
Esta función procesa una tarjeta personalizada, como si viniera de Dialogflow como un mensaje de respuesta enriquecida. El formato de la respuesta de carga útil personalizada se define en la sección Mensajes de respuesta enriquecida.
Por ejemplo:
const dfMessenger = document.querySelector('df-messenger');
const payload = [
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"actionLink": "https://example.com"
}];
dfMessenger.renderCustomCard(payload);
showMinChat
Esta función muestra una versión mínima de las listas de mensajes.
Por ejemplo:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();
Mensajes de respuesta enriquecida
Cuando creas mensajes de respuesta enriquecida, puedes crear respuestas de texto y cargas útiles personalizadas desde la pestaña de respuesta predeterminada del intent. Las respuestas de texto se usan para las respuestas básicas del agente, y las cargas útiles personalizadas se usan para las respuestas enriquecidas. El formato de carga útil personalizado para todos los tipos de respuesta tiene la siguiente estructura básica:
{
"richContent": [
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
],
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
]
]
}
Ten en cuenta que el valor richContent permite un arreglo externo y varios internos.
Las respuestas dentro de un arreglo interno están unidas en una sola tarjeta visual.
Cuando el arreglo externo contiene varios arreglos internos, se muestran varias tarjetas, una para cada arreglo interno.
En las subsecciones restantes, se describen los distintos tipos de respuestas que puedes configurar para una carga útil personalizada.
Tipo de respuesta de información
El tipo de respuesta de información es una tarjeta de título simple que los usuarios pueden tocar o hacerles clic.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string | Tipo de respuesta: “información” |
title |
string | Título de la tarjeta |
subtitle |
string | Subtítulo de la tarjeta |
image |
objeto | Imagen |
image.src |
objeto | Origen de la imagen |
image.src.rawUrl |
string | La URL pública de la imagen |
actionLink |
string | URL que se seguirá cuando se haga clic en la tarjeta |
Por ejemplo:
{
"richContent": [
[
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"actionLink": "https://example.com"
}
]
]
}
Tipo de respuesta de descripción
El tipo de respuesta de descripción es una tarjeta informativa que puede tener varias líneas de texto.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string | Tipo de respuesta: “descripción” |
title |
string | Título de la tarjeta |
text |
arreglo<string> | Arreglo de strings, en el que cada string se procesa en una línea nueva |
Por ejemplo:
{
"richContent": [
[
{
"type": "description",
"title": "Description title",
"text": [
"This is text line 1.",
"This is text line 2."
]
}
]
]
}
Tipo de respuesta de imagen
El tipo de respuesta de imagen es una tarjeta de imagen que los usuarios pueden tocar o hacerle clic.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string | Tipo de respuesta: “imagen” |
rawUrl |
string | La URL pública de la imagen |
accessibilityText |
string | Texto alternativo para la imagen |
Por ejemplo:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Example logo"
}
]
]
}
Tipo de respuesta de botón
El tipo de respuesta de botón es un botón pequeño con un ícono que los usuarios pueden tocar o hacerle clic.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string | Tipo de respuesta: “botón” |
icon |
objeto | El ícono del botón |
icon.type |
string | Ícono de la Biblioteca de íconos de material. El ícono predeterminado es una flecha |
icon.color |
string | Color de código hexadecimal |
text |
string | Texto del botón |
link |
string | La URL que se seguirá cuando se haga clic en el botón |
event |
objeto | Evento de Dialogflow que se activa cuando se hace clic en el botón. Consulta la referencia de REST de EventInput. |
Por ejemplo:
{
"richContent": [
[
{
"type": "button",
"icon": {
"type": "chevron_right",
"color": "#FF9800"
},
"text": "Button text",
"link": "https://example.com",
"event": {
"name": "",
"languageCode": "",
"parameters": {}
}
}
]
]
}
Tipo de respuesta de lista
El tipo de respuesta de lista es una tarjeta con varias opciones que los usuarios pueden seleccionar.
La respuesta contiene un arreglo de tipos de respuesta list y divider.
En la siguiente tabla, se describe el tipo list:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string | Tipo de respuesta: “lista” |
title |
string | Título de la opción |
subtitle |
string | Subtítulo de la opción |
event |
objeto | Evento de Dialogflow que se activa cuando se hace clic en la opción. Consulta la referencia de REST de EventInput. |
En la siguiente tabla, se describe el tipo divider:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string | Tipo de respuesta: “divisor” |
Por ejemplo:
{
"richContent": [
[
{
"type": "list",
"title": "List item 1 title",
"subtitle": "List item 1 subtitle",
"event": {
"name": "",
"languageCode": "",
"parameters": {}
}
},
{
"type": "divider"
},
{
"type": "list",
"title": "List item 2 title",
"subtitle": "List item 2 subtitle",
"event": {
"name": "",
"languageCode": "",
"parameters": {}
}
}
]
]
}
Tipo de respuesta de acordeón
El tipo de respuesta de acordeón es una tarjeta pequeña que los usuarios pueden tocar o hacerle clic a fin de expandir y mostrar más texto.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string | Tipo de respuesta: “acordeón” |
title |
string | Título del acordeón |
subtitle |
string | Subtítulo del acordeón |
image |
objeto | Imagen |
image.src |
objeto | Origen de la imagen |
image.src.rawUrl |
string | La URL pública de la imagen |
text |
string | Texto del acordeón |
Por ejemplo:
{
"richContent": [
[
{
"type": "accordion",
"title": "Accordion title",
"subtitle": "Accordion subtitle",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"text": "Accordion text"
}
]
]
}
Tipo de respuesta de chips de sugerencias
El tipo de respuesta de chips de sugerencias le proporciona al usuario final una lista de chips de sugerencias en los que se puede hacer clic.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string | Tipo de respuesta: “chips” |
options |
array<object> | Arreglo de objetos de opciones |
options[].text |
string | Texto de la opción |
options[].image |
objeto | Imagen de la opción |
options[].image.src |
objeto | Origen de la imagen de la opción |
options[].image.src.rawUrl |
string | La URL pública de la opción para la imagen |
options[].link |
string | El vínculo de la opción |
Por ejemplo:
{
"richContent": [
[
{
"type": "chips",
"options": [
{
"text": "Chip 1",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"link": "https://example.com"
},
{
"text": "Chip 2",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"link": "https://example.com"
}
]
}
]
]
}
Tipos de respuesta combinados
Los elementos individuales de mensajes enriquecidos para Dialogflow Messenger se pueden combinar a fin de crear una tarjeta personalizada que se adapte a tus necesidades. A continuación, se muestra un ejemplo con algunos de los elementos antes mencionados:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Dialogflow across platforms"
},
{
"type": "info",
"title": "Dialogflow",
"subtitle": "Build natural and rich conversational experiences",
"actionLink": "https://cloud.google.com/dialogflow/docs"
},
{
"type": "chips",
"options": [
{
"text": "Case Studies",
"link": "https://cloud.google.com/dialogflow/case-studies"
},
{
"text": "Docs",
"link": "https://cloud.google.com/dialogflow/docs"
}
]
}
]
]
}
Realiza una depuración
Para probar tu agente con Dialogflow Messenger de forma local, haz lo siguiente:
- Inserta el elemento de Dialogflow Messenger en una página como se describió antes.
- Inicia un servidor HTTP local para esa página con un puerto específico.
- Accede a esa página en
http://localhost:port_number.