La integración heredada de Dialogflow CX Messenger proporciona un diálogo de chat personalizable para tu agente que puedes incorporar en tu sitio web. Los usuarios pueden abrir y cerrar el diálogo de chat como una ventana. Cuando un usuario abre el diálogo de chat, este aparece sobre tu contenido en la parte inferior derecha de la pantalla.
Migra a la versión más reciente de Dialogflow CX Messenger
La versión más reciente de Dialogflow CX Messenger proporciona autenticación para controlar el acceso a las consultas del agente y más opciones de configuración de la interfaz de usuario. Te recomendamos que migres de la versión heredada a la nueva.
Si habilitaste la integración de Dialogflow CX Messenger antes del 29 de agosto de 2023, es posible que estés usando la versión heredada. Para determinar si estás usando la versión heredada, examina el código HTML de Messenger incorporado en tu sitio web. Si ves la siguiente secuencia de comandos, significa que estás usando la versión heredada:
https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1
Para migrar a la versión nueva, completa los siguientes pasos:
- Borra todo el código HTML, CSS y JavaScript de Messenger de tu sitio web.
- Sigue las instrucciones para la integración más reciente de Dialogflow CX Messenger.
Personalizaciones de HTML
Puedes personalizar varios aspectos de la apariencia y el comportamiento del diálogo de chat.
El elemento HTML df-messenger tiene los siguientes atributos:
| Atributo | Política de entrada | Valor |
|---|---|---|
agent-id |
Obligatorio | Es el ID de agente asociado con el agente. 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 CX 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 |
Obligatorio | 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. |
df-cx |
Obligatorio | Indica que la interacción está con un agente de CX. Usa “true” como valor. |
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 | Es un evento personalizado que se invoca cuando se abre el diálogo de chat. Puedes usar un controlador de eventos que se llame para este evento y que produzca el primer mensaje del agente. |
language-code |
Obligatorio | Código de idioma predeterminado para el primer intent. Se propaga antes con el idioma predeterminado del agente. |
location |
Obligatorio | La región 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 | Te permite hacer un seguimiento de un usuario en todas las sesiones. Puedes pasar el valor a Dialogflow CX a través del campo queryParams.payload.userId en una solicitud de detección de intents, y Dialogflow CX te proporciona este valor a través del campo WebhookRequest.payload.userId. |
wait-open |
Opcional | Es un atributo booleano que retrasa el evento personalizado definido en el atributo intent hasta que se abre el diálogo. |
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>
Esta configuración dará 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 destino 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
},
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
Puedes llamar a las funciones que proporciona el elemento df-messenger para afectar su comportamiento.
renderCustomText
Esta función renderiza un mensaje de texto, como si proviniera de Dialogflow CX como una respuesta de texto.
Por ejemplo:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');
renderCustomCard
Esta función renderiza una tarjeta personalizada, como si proviniera del fulfillment de Dialogflow CX. El formato de la respuesta de carga útil personalizada se define en la sección Entrega.
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 minimalista de las listas de mensajes.
Por ejemplo:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();
Entrega
Cuando creas un cumplimiento, puedes crear respuestas de texto y cargas útiles personalizadas. 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 personalizada 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",
...
}
]
]
}
El valor richContent permite un array externo y varios arrays internos. Las respuestas
dentro de un array interno se vinculan en una sola tarjeta visual. Cuando el
array externo contiene varios arrays internos, se muestran varias tarjetas, una para
cada array 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 que puedes presionar o en la que puedes hacer clic.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
cadena | Tipo de respuesta: "info". |
title |
cadena | Título de la tarjeta. |
subtitle |
cadena | Subtítulo de la tarjeta. |
image |
objeto | Imagen |
image.src |
objeto | Fuente de la imagen. |
image.src.rawUrl |
cadena | Es la URL pública de la imagen. |
actionLink |
cadena | Es la URL a la que se dirige al usuario cuando hace 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 |
cadena | Tipo de respuesta: "description". |
title |
cadena | Título de la tarjeta. |
text |
arreglo<string> | Es un array de cadenas, en el que cada cadena se renderiza 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 |
cadena | Tipo de respuesta: "image". |
rawUrl |
cadena | Es la URL pública de la imagen. |
accessibilityText |
cadena | Texto alternativo de 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 y una etiqueta de texto en los que puedes hacer clic o presionar.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
cadena | Tipo de respuesta: "button". |
icon |
objeto | Ícono del botón. |
icon.type |
cadena | Ícono de la Biblioteca de íconos de material. El ícono predeterminado es una flecha. |
icon.color |
cadena | Código hexadecimal del color. |
text |
cadena | Es el texto del botón. |
link |
cadena | Es la URL a la que se debe dirigir al usuario cuando hace clic en el botón. |
event |
objeto | Es el evento de Dialogflow CX que se activa cuando se hace clic en el botón. |
Por ejemplo:
{
"richContent": [
[
{
"type": "button",
"icon": {
"type": "chevron_right",
"color": "#FF9800"
},
"text": "Button text",
"link": "https://example.com",
"event": {
"name": ""
}
}
]
]
}
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 array de tipos de respuesta list y divider.
En la siguiente tabla, se describe el tipo list:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
cadena | Tipo de respuesta: "list". |
title |
cadena | Título de la opción. |
subtitle |
cadena | Subtítulo de la opción. |
event |
objeto | Es el evento de Dialogflow CX que se activa cuando se hace clic en la opción. |
En la siguiente tabla, se describe el tipo divider:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
cadena | Tipo de respuesta: "divider". |
Por ejemplo:
{
"richContent": [
[
{
"type": "list",
"title": "List item 1 title",
"subtitle": "List item 1 subtitle",
"event": {
"name": ""
}
},
{
"type": "divider"
},
{
"type": "list",
"title": "List item 2 title",
"subtitle": "List item 2 subtitle",
"event": {
"name": ""
}
}
]
]
}
Tipo de respuesta de acordeón
El tipo de respuesta de acordeón es una tarjeta pequeña en la que puedes hacer clic o tocar para expandir y revelar más texto.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
cadena | Tipo de respuesta: "accordion". |
title |
cadena | Título del acordeón. |
subtitle |
cadena | Subtítulo del acordeón. |
image |
objeto | Imagen |
image.src |
objeto | Fuente de la imagen. |
image.src.rawUrl |
cadena | Es la URL pública de la imagen. |
text |
cadena | Es el 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 chip de sugerencias 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 |
cadena | Tipo de respuesta: "chips". |
options |
arreglo<objeto> | Es un array de objetos de opción. |
options[].text |
cadena | Es el texto de la opción. |
options[].image |
objeto | Imagen de la opción. |
options[].image.src |
objeto | Fuente de la imagen de la opción. |
options[].image.src.rawUrl |
cadena | URL pública opcional de la imagen. |
options[].link |
cadena | Es la URL del 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
Puedes usar los elementos de mensajes enriquecidos individuales de Dialogflow CX Messenger para crear una tarjeta personalizada que se adapte a tus necesidades.
Este es un ejemplo en el que se usan algunos de los elementos que se mencionaron anteriormente:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Dialogflow CX across platforms"
},
{
"type": "info",
"title": "Dialogflow CX",
"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"
}
]
}
]
]
}
Depuración
Para probar tu agente de forma local con Dialogflow CX Messenger, sigue estos pasos:
- Incorpora el elemento Dialogflow CX Messenger en una página, como se describe en la sección Personalizaciones de HTML.
- Inicia un servidor HTTP local para esa página con un puerto específico.
- Ve a
http://localhost:port_numberpara acceder a esa página.