Dialogflow Messenger

Esta integración proporciona un diálogo de chat personalizable para tu agente que se puede incorporar en tu sitio web.

Captura de pantalla de Dialogflow Messenger

Configuración

Esta integración puede permitir el acceso a consultas de usuario final autenticada o no autenticada.

Configuración sin autenticar

Para configurar el acceso no autenticado a tu agente de Dialogflow Messenger, haz lo siguiente:

  1. Ir a la consola de Dialogflow CX
  2. Elige tu proyecto de Google Cloud.
  3. Selecciona el agente.
  4. Selecciona la pestaña Administrar.
  5. Haz clic en Integrations, en el menú de la barra lateral izquierda.
  6. Haz clic en Conectar en Dialogflow Messenger.
  7. Se abrirá un cuadro de diálogo de configuración.
  8. Si la integración se configuró anteriormente para este agente, verás código HTML integrable. Independientemente de si deseas autenticar o no autenticar, haz clic en el botón Inhabilitar... en la parte inferior del diálogo para que puedas volver a establecer la configuración en el siguiente paso.
  9. Selecciona un entorno.
  10. Selecciona API sin autenticar.
  11. Selecciona un estilo.
  12. De manera opcional, puedes restringir el acceso al dominio.
  13. Haz clic en Habilitar la API sin autenticar.
  14. El cuadro de diálogo mostrará el código HTML incorporable que se puede incorporar a tu sitio web. Copia este código.
  15. Haz clic en Listo.

Configuración autenticada

Para configurar el acceso autenticado a tu agente de Dialogflow Messenger, haz lo siguiente:

  1. Ir a la consola de Dialogflow CX
  2. Elige tu proyecto de Google Cloud.
  3. Selecciona el agente.
  4. Selecciona la pestaña Administrar.
  5. Haz clic en Integrations, en el menú de la barra lateral izquierda.
  6. Haz clic en Conectar en Dialogflow Messenger.
  7. Se abrirá un cuadro de diálogo de configuración.
  8. Si la integración se configuró anteriormente para este agente, verás código HTML integrable. Independientemente de si deseas autenticar o no autenticar, haz clic en el botón Inhabilitar... en la parte inferior del diálogo para que puedas volver a establecer la configuración en el siguiente paso.
  9. Selecciona un entorno.
  10. Selecciona Authorized API.
  11. Selecciona un estilo.
  12. De manera opcional, puedes restringir el acceso al dominio.
  13. Haz clic en Habilitar la API autorizada.
  14. El cuadro de diálogo mostrará el código HTML incorporable que se puede incorporar a tu sitio web. Copia este código.
  15. Haz clic en Listo.
  16. Configura el cliente de OAuth:
    1. Crea una pantalla de consentimiento de OAuth para tu organización. Agrega ./auth/cloud-platform como alcance obligatorio.
    2. Crea un ID de cliente de OAuth 2.0. En Orígenes autorizados de JavaScript, especifica los orígenes HTTP que pueden alojar y consultar tu agente. Por ejemplo, https://your-company.com.
    3. Otorga permiso a los usuarios finales para que hagan consultas al agente. Agrega a cada uno de tus usuarios finales o un grupo como principal con el rol Cliente de la API de Dialogflow.

Embed

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.

Si usas una integración autenticada, configura el atributo oauth-client-id de <df-messenger> en tu ID de cliente de OAuth.

Actualiza los demás atributos que deban actualizarse.

Para permitir diseños responsivos, agrega también lo siguiente a tu elemento <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Opciones de elementos de chat HTML

El elemento secundario del elemento df-messenger puede ser cualquiera de las siguientes opciones:

  • df-messenger-chat: El diálogo del agente siempre está abierto
  • df-messenger-chat-bubble: El diálogo del agente se puede abrir o cerrar con un botón de burbuja de apertura y cierre.

Personalizaciones de HTML

Puedes personalizar varios aspectos sobre cómo aparece y se comporta el cuadro de diálogo de chat.

Personalizaciones de HTML para df-messenger

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.
allow-feedback Opcional Configúralo como all para permitir que los usuarios finales proporcionen comentarios sobre las respuestas del agente.
language-code Requeridos Código de idioma predeterminado.
project-id Requeridos El ID del proyecto para el agente.
location Opcional La región del agente. El valor predeterminado es global.
intent Opcional Un evento personalizado que se invocará cuando se abra el diálogo de chat. Puedes usar un controlador de eventos que se llamará para este evento y generará el primer mensaje de agente.
oauth-client-id Opcional Obligatorio para la autenticación de OAuth. El valor predeterminado es nulo. Si no se proporciona el valor y el acceso no autenticado de Dialogflow Messenger está habilitado, los usuarios no autenticados pueden interactuar con el agente. Si se proporciona el valor, el diálogo del agente se superpondrá con una notificación de "Solicitar autenticación" (se puede controlar el texto, consulta request-auth-text a continuación), que requiere que el usuario acceda para poder usar el agente.
storage-option Opcional Especifica el almacenamiento local para los mensajes de conversación. Usa none si no se deben almacenar los mensajes. Si usas none, se borrarán todos los mensajes cuando se actualice o se vuelva a cargar la página. La configuración predeterminada es sessionStorage.
session-ttl Opcional Se establece en una duración en segundos para mantener la sesión. Debe ser estrictamente inferior a 86,400 (1d) y, de forma predeterminada, 1800 (30 min).
url-allowlist Opcional Permite que se carguen imágenes desde una lista de prefijos de URL separados por comas. Las URLs de imágenes que se usan en las respuestas HTML o Markdown deben comenzar con uno de los prefijos enumerados. Usa * para permitir todas las URLs.

Personalizaciones de HTML para df-messenger-chat

Captura de pantalla de Dialogflow Messenger

El elemento HTML df-messenger-chat tiene los siguientes atributos:

Atributo Política de entrada Valor
chat-title Opcional El título del cuadro de chat, que aparece arriba de él.
chat-subtitle Opcional El subtítulo del cuadro de chat, que se muestra arriba, debajo del chat-title
chat-title-icon Opcional El ícono que aparece en el título del cuadro de chat, que aparece arriba, a la izquierda de chat-title de forma predeterminada
bot-writing-text Opcional El texto que se muestra mientras el agente está escribiendo
bot-writing-image Opcional La imagen que se muestra mientras el agente está escribiendo. Tiene prioridad sobre bot-writing-text.
request-auth-text Opcional El texto del botón en caso de que se requiera autenticación.
placeholder-text Opcional Texto que se mostrará en el campo de entrada cuando esté vacío. La configuración predeterminada es "Preguntar algo...".

Personalizaciones de HTML para df-messenger-chat-bubble

Captura de pantalla de Dialogflow Messenger

El elemento HTML df-messenger-chat-bubble tiene los mismos atributos que df-messenger-chat y los siguientes atributos adicionales:

Atributo Política de entrada Valor
expanded Opcional Es un valor booleano que determina si el chat está abierto inicialmente. Si no la estableces, el chat recordará su último estado.
chat-icon Opcional El ícono de la burbuja de chat. Debe ser un URI disponible públicamente.
chat-close-icon Opcional Ícono de cierre de la burbuja de chat. Debe ser un URI disponible públicamente.
chat-collapse-icon Opcional El ícono del botón para contraer en la barra de título. Debe ser un URI disponible públicamente.
anchor Opcional Define dónde se ubica el diálogo de chat en relación con la burbuja de apertura o cierre. El valor son dos palabras de dirección (top, bottom, left, right) delimitadas por -. El valor predeterminado es top-left. La primera dirección define el punto de anclaje y la segunda dirección define la dirección principal de expansión fuera de la burbuja. Por ejemplo: top-left se coloca en la parte superior de la burbuja y se expande hacia la izquierda y hacia arriba (lejos de la burbuja).
chat-width Opcional Define el ancho de la ventana de chat. Son valores numéricos (en píxeles). La configuración predeterminada es 320 px.
chat-height Opcional Define la altura de la ventana de chat. Son valores numéricos (en píxeles). La configuración predeterminada es 480 px.
allow-fullscreen Opcional Define si la ventana de chat se puede abrir en pantalla completa. Si la estableces como always, se abre en pantalla completa para todos los tamaños de pantalla. Si se configura en small, se abre la pantalla completa para tamaños de pantalla inferiores a 500 px; de lo contrario, se abre como una ventana normal. Puede anular chat-width, chat-height y anchor si se configura.

Personalizaciones de CSS

Puedes personalizar el estilo de tu cuadro de chat si estableces las variables de CSS.

Diseños generales

Las siguientes variables de CSS proporcionan opciones de estilo generales:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes para usar en todo el widget
df-messenger-font-size Opcional 14px Tamaño del texto para usar en todo el widget
df-messenger-font-color Opcional #1f1f1f Color del texto para usar en todo el widget
df-messenger-primary-color Opcional #0b57d0 El color principal de los elementos del widget (como el fondo de la barra de título y del botón de acción, entre otros)
df-messenger-focus-color Opcional #1e88e5 Color del anillo de enfoque alrededor de los elementos
df-messenger-focus-color-contrast Opcional blanco Color del anillo de enfoque alrededor de los elementos cuando está dentro de un elemento superior con un color de fondo (como la barra de título)
df-messenger-chat-border Opcional ninguno Borde del diálogo
df-messenger-chat-border-radius Opcional 0 Radio de borde del diálogo

Estilo para df-messenger-chat-bubble

Cuando se usa el elemento df-messenger-chat-bubble, se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-chat-window-height Opcional 480px Altura de la ventana de chat
df-messenger-chat-window-width Opcional 320px Ancho de la ventana de chat
df-messenger-chat-window-offset Opcional 16 px Distancia entre el cuadro y la ventana de chat
df-messenger-chat-window-box-shadow Opcional ninguno Sombra difuminada de la ventana de chat
df-messenger-chat-bubble-close-icon-size Opcional 24px Tamaño del ícono de cierre de la burbuja de chat
df-messenger-chat-collapse-icon-size Opcional desconfigurar Tamaño del ícono del botón para contraer en la barra de título
df-messenger-chat-bubble-close-icon-transform-rotate Opcional -90 grados Rotación del ícono de cierre de la burbuja de chat; se rota a 0 grados cuando se cierra el chat
df-messenger-chat-bubble-size Opcional 64 px Tamaño de la burbuja de chat
df-messenger-chat-bubble-border-radius Opcional 32px Radio del borde de la burbuja de chat
df-messenger-chat-bubble-border Opcional ninguno Borde de la burbuja de chat

Estilo de la barra de título

Para la barra de título, se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-titlebar-background Opcional #0b57d0 Fondo de la barra de título
df-messenger-titlebar-padding Opcional 0 15px Relleno de la barra de título
df-messenger-titlebar-border Opcional ninguno Borde de la barra de título
df-messenger-titlebar-border-bottom Opcional ninguno Borde inferior de la barra de título
df-messenger-titlebar-title-align Opcional iniciar Alineación del texto del título en la barra de título. Los valores permitidos son start, center o end.
df-messenger-titlebar-font-color Opcional blanco El color del texto en la barra de título
df-messenger-titlebar-letter-spacing Opcional Normal El espacio entre letras del texto en la barra de título
df-messenger-titlebar-title-font-size Opcional 18px Tamaño del texto del título en la barra de título
df-messenger-titlebar-title-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes del texto del título en la barra de título
df-messenger-titlebar-title-font-weight Opcional 400 Grosor de la fuente del texto del título en la barra de título
df-messenger-titlebar-title-line-height Opcional Normal Altura de línea del texto del título en la barra de título
df-messenger-titlebar-title-letter-spacing Opcional Normal Espacio entre letras del texto del título en la barra de título
df-messenger-titlebar-subtitle-font-color Opcional blanco El color del texto de los subtítulos en la barra de título
df-messenger-titlebar-subtitle-font-size Opcional 18px Tamaño del texto de los subtítulos en la barra de título
df-messenger-titlebar-subtitle-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes del texto del subtítulo en la barra de título
df-messenger-titlebar-subtitle-font-weight Opcional 400 Grosor de la fuente del texto del subtítulo en la barra de título
df-messenger-titlebar-subtitle-line-height Opcional Normal Altura de línea del texto del subtítulo en la barra de título
df-messenger-titlebar-subtitle-letter-spacing Opcional Normal Espaciado entre letras del texto de los subtítulos en la barra de título
df-messenger-titlebar-title-order Opcional fila Ordena los elementos en la barra de título. Los valores permitidos son row o row-reverse. Este valor solo será efectivo si se especificó el atributo chat-title-icon.
df-messenger-titlebar-icon-width Opcional 18px El ancho del ícono en la barra de título. Este valor solo se aplica si se especificó chat-title-icon.
df-messenger-titlebar-icon-height Opcional 18px La altura del ícono en la barra de título. Este valor solo se aplica si se especificó chat-title-icon.
df-messenger-titlebar-icon-padding Opcional 0 12px 0 0 El padding alrededor del ícono en la barra de título. Este valor solo se aplica si se especificó chat-title-icon.

Estilo de la ventana de chat

Para la ventana de chat, se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-chat-background Opcional #fafafa Background del diálogo del agente en el que se muestran los mensajes
df-messenger-chat-padding Opcional 10px Padding del diálogo del agente en el que se muestran los mensajes
df-messenger-messagelist-border Opcional ninguno Borde de la lista de mensajes
df-messenger-message-border Opcional ninguno Borde de los mensajes de diálogo del agente
df-messenger-message-font-size Opcional 14px Tamaño del texto de los mensajes de diálogo del agente
df-messenger-message-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes de los mensajes de diálogo del agente
df-messenger-message-font-weight Opcional Normal Grosor de la fuente de los mensajes de diálogo del agente
df-messenger-message-bot-background Opcional #ecf3fe Segundo plano de los mensajes que envió el agente
df-messenger-message-bot-border Opcional ninguno Borde de los mensajes que envió el agente
df-messenger-message-bot-font-color Opcional #1f1f1f El color del texto de los mensajes que envió el agente
df-messenger-message-bot-font-weight Opcional Normal Grosor de la fuente de los mensajes que envió el agente
df-messenger-message-user-background Opcional #e1e3e1 Segundo plano de los mensajes enviados por el usuario.
df-messenger-message-user-border Opcional ninguno Borde de los mensajes enviados por el usuario
df-messenger-message-user-font-color Opcional #1f1f1f El color del texto de los mensajes que envió el usuario
df-messenger-message-user-font-weight Opcional Normal El grosor de la fuente de los mensajes que envió el usuario
df-messenger-feedback-font-color Opcional #333333 Color del texto de los botones de comentarios
df-messenger-feedback-spacing Opcional 10px Espacio entre el último mensaje y los botones de comentarios
df-messenger-message-spacing Opcional 10px Espacio entre dos mensajes
df-messenger-message-border-radius Opcional 8 px Radio de borde para los mensajes (se aplica a todas las esquinas)
df-messenger-message-bot-border-top-left-radius Opcional 8 px Radio de borde superior izquierdo para mensajes de agentes; anula el radio genérico
df-messenger-message-bot-border-top-right-radius Opcional 8 px Radio del borde superior derecho de los mensajes de los agentes; anula el radio genérico
df-messenger-message-bot-border-bottom-left-radius Opcional 8 px Radio del borde inferior izquierdo para mensajes del agente; anula el radio genérico
df-messenger-message-bot-border-bottom-right-radius Opcional 8 px Radio del borde inferior derecho para mensajes de agentes; anula el radio genérico
df-messenger-message-user-border-top-left-radius Opcional 8 px Radio de borde superior izquierdo para mensajes del usuario; anula el radio genérico
df-messenger-message-user-border-top-right-radius Opcional 8 px Radio del borde superior derecho para los mensajes del usuario; anula el radio genérico
df-messenger-message-user-border-bottom-left-radius Opcional 8 px Radio del borde inferior izquierdo para mensajes del usuario; anula el radio genérico
df-messenger-message-user-border-bottom-right-radius Opcional 8 px Radio del borde inferior derecho para mensajes del usuario; anula el radio genérico
df-messenger-message-stack-spacing Opcional 10px Espacio entre dos mensajes consecutivos
df-messenger-message-bot-stack-border-top-left-radius Opcional 8 px Radio del borde superior izquierdo para mensajes consecutivos del agente; anula el radio superior izquierdo del agente
df-messenger-message-bot-stack-border-top-right-radius Opcional 8 px Radio del borde superior derecho para mensajes consecutivos del agente; anula el radio superior derecho del agente
df-messenger-message-bot-stack-border-bottom-left-radius Opcional 8 px Radio del borde inferior izquierdo para mensajes consecutivos del agente; anula el radio inferior izquierdo del agente
df-messenger-message-bot-stack-border-bottom-right-radius Opcional 8 px Radio del borde inferior derecho para mensajes consecutivos del agente; anula el radio inferior derecho del agente
df-messenger-message-user-stack-border-top-left-radius Opcional 8 px Radio del borde superior izquierdo para mensajes consecutivos del usuario; anula el radio superior izquierdo del usuario
df-messenger-message-user-stack-border-top-right-radius Opcional 8 px Radio del borde superior derecho para mensajes consecutivos del usuario; anula el radio de la esquina superior derecha del usuario
df-messenger-message-user-stack-border-bottom-left-radius Opcional 8 px Radio del borde inferior izquierdo para mensajes consecutivos del usuario; anula el radio inferior izquierdo del usuario
df-messenger-message-user-stack-border-bottom-right-radius Opcional 8 px Radio del borde inferior derecho para mensajes consecutivos del usuario; anula el radio inferior derecho del usuario
df-messenger-message-user-writing-image-width Opcional 24px Ancho de la imagen que se muestra mientras el agente está escribiendo; solo activo si se establece bot-writing-image
df-messenger-message-bot-writing-image-height Opcional 24px Altura de la imagen que se muestra mientras el agente está escribiendo. Solo activa si se establece bot-writing-image.
df-messenger-message-bot-writing-font-weight Opcional Normal El grosor de la fuente del texto que se muestra mientras el agente está escribiendo; solo se activa si se establece bot-writing-text
df-messenger-message-bot-writing-font-size Opcional 14px Tamaño del texto que se muestra mientras el agente está escribiendo; solo activo si se configura bot-writing-text
df-messenger-message-bot-writing-border Opcional ninguno Borde del mensaje que se muestra mientras el agente está escribiendo
df-messenger-message-bot-writing-background Opcional #ecf3fe Segundo plano del mensaje que se muestra mientras el agente está escribiendo
df-messenger-message-bot-writing-padding Opcional 12px Padding del mensaje que se muestra mientras el agente está escribiendo
df-messenger-message-bot-writing-spacing Opcional 10px Espacio entre el mensaje que se muestra mientras el agente está escribiendo y el mensaje anterior
df-messenger-message-error-background Opcional negro Background del mensaje de error que se muestra en el diálogo del agente
df-messenger-message-error-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes del mensaje de error que se muestra en el diálogo del agente
df-messenger-message-error-font-size Opcional 12px Tamaño de fuente del mensaje de error que se muestra en el diálogo del agente
df-messenger-message-error-font-color Opcional blanco Color del texto del mensaje de error que se muestra en el diálogo del agente
df-messenger-chat-scroll-button-display Opcional ninguno Define la visualización del botón "Ir al final". Los valores permitidos son block o none.
df-messenger-chat-scroll-button-container-padding Opcional 8 px Relleno del contenedor alrededor del botón “Jump to Bottom”
df-messenger-chat-scroll-button-font-size Opcional 14px Tamaño del texto del botón "Ir al final"
df-messenger-chat-scroll-button-font-color Opcional blanco Color del texto del botón "Ir al final"
df-messenger-chat-scroll-button-background Opcional #0b57d0 Fondo del botón "Ir al final"
df-messenger-chat-scroll-button-border-radius Opcional 999px Radio del borde del botón “Ir al final”
df-messenger-chat-messagelist-scroll-shadow-background Opcional gradiente radial(lado más largo al 50% 100%, rgba(0,0,0,.2), transparente) inferior Sombra que se muestra en la parte inferior de la lista de mensajes cuando la lista no se desplaza hasta la parte inferior, se debe establecer en none para inhabilitarla

Estilos para las entradas del usuario

Para la entrada del usuario, se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-send-icon-color Opcional #0b57d0 Color del ícono "enviar" en la entrada del usuario
df-messenger-send-icon-color-hover Opcional #0b57d0 El color del ícono de enviar en la entrada del usuario al colocar el cursor sobre él
df-messenger-send-icon-color-active Opcional #0b57d0 El color del ícono "enviar" en la entrada del usuario cuando se puede enviar texto
df-messenger-send-icon-offset-x Opcional 0 Desplazamiento vertical del ícono “enviar” en la entrada del usuario
df-messenger-send-icon-offset-y Opcional -2px Desplazamiento horizontal del ícono “enviar” en la entrada del usuario
df-messenger-input-background Opcional blanco Background de la entrada del usuario
df-messenger-input-padding Opcional 8 px Padding general entre el campo de entrada del usuario (incluido el botón para enviar un mensaje) y el contenedor.
df-messenger-input-inner-padding Opcional 5px 48px 5px 0 Padding interno entre el campo de entrada del usuario (sin incluir el botón para enviar un mensaje) y el contenedor.
df-messenger-input-border Opcional ninguno Borde de la entrada del usuario
df-messenger-input-border-top Opcional 1 px sólido #e0e0e0 Borde superior de la entrada del usuario
df-messenger-input-border-bottom Opcional ninguno Borde inferior del campo de texto de la entrada del usuario
df-messenger-input-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes de la entrada del usuario
df-messenger-input-font-color Opcional #1f1f1f Color del texto de la entrada del usuario
df-messenger-input-font-size Opcional 14px Tamaño del texto de la entrada del usuario
df-messenger-input-font-weight Opcional Normal Grosor de la fuente de la entrada del usuario
df-messenger-input-box-border Opcional ninguno Borde de la casilla de entrada del usuario
df-messenger-input-box-focus-border Opcional ninguno Borde del cuadro de entrada del usuario enfocado
df-messenger-input-box-border-radius Opcional 0 Radio del borde de la casilla de entrada del usuario
df-messenger-input-box-padding Opcional 8px 0 Relleno de la casilla de entrada del usuario
df-messenger-input-box-focus-padding Opcional 8px 0 Relleno del cuadro de entrada del usuario enfocado
df-messenger-input-gutter Opcional estable Margen de la barra de desplazamiento de la entrada del usuario

Diseño de superposición de autenticación

Cuando se utiliza una configuración autenticada, se pueden proporcionar las siguientes variables de CSS para la superposición:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-auth-background Opcional rgba(204, 204, 204, 0.8) Background del cuadro de diálogo del agente cuando se muestra la autenticación
df-messenger-auth-button-background Opcional #0b57d0 Fondo del botón de autenticación
df-messenger-auth-button-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes del botón de autenticación
df-messenger-auth-button-font-color Opcional blanco Color del texto del botón de autenticación
df-messenger-auth-button-font-size Opcional 14px Tamaño del texto del botón de autenticación
df-messenger-auth-button-border Opcional ninguno Borde del botón de autenticación
df-messenger-auth-button-border-radius Opcional 8 px Radio del borde del botón de autenticación

Estilos de comentarios

Cuando se habilita la función de comentarios sobre las respuestas, se pueden proporcionar las siguientes variables de CSS para los controles de comentarios.

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-message-feedback-icon-distance Opcional 8 px Distancia entre los botones de Me gusta y No me gusta
df-messenger-message-feedback-icon-font-color Opcional #444746 Color de los botones de Me gusta y No me gusta
df-messenger-message-feedback-icon-font-color-active Opcional #444746 Color de los botones de Me gusta y No me gusta cuando están activos
df-messenger-message-feedback-icon-border Opcional ninguno Borde de los botones de Me gusta y No me gusta
df-messenger-message-feedback-icon-border-radius Opcional 0 Radio del borde de los botones de Me gusta y No me gusta
df-messenger-message-feedback-icon-background Opcional ninguno Fondo de los botones de Me gusta y No me gusta
df-messenger-message-feedback-icon-background-hover Opcional ninguno Fondo de los botones de Me gusta y No me gusta cuando colocas el cursor sobre ellos
df-messenger-message-feedback-icon-padding Opcional 0 Relleno de los botones de Me gusta y No me gusta
df-messenger-message-rich-feedback-spacing Opcional 10px Espaciado de elementos en los comentarios enriquecidos
df-messenger-message-rich-feedback-padding Opcional 0 Relleno de comentarios enriquecidos
df-messenger-message-rich-feedback-background Opcional ninguno Contexto de los comentarios enriquecidos
df-messenger-message-rich-feedback-border-radius Opcional 0 Radio del borde de los comentarios enriquecidos
df-messenger-message-rich-feedback-border Opcional ninguno Borde de los comentarios valiosos
df-messenger-rich-feedback-offset-left Opcional 0 Desplazamiento en el lado izquierdo

Eventos de JavaScript

Dialogflow Messenger activa una variedad de eventos para los que puedes crear objetos de escucha de eventos. Algunos eventos tienen un campo de objeto detail, que proporciona más información sobre el evento.

Se admiten los siguientes eventos:

Evento Activador Campos del detalle
df-messenger-loaded Primero se carga el diálogo del agente. ninguno.
df-accordion-clicked El usuario hizo clic en el acordeón. ninguno.
df-button-clicked El usuario hizo clic en un botón. actionLink: Es el código de anclaje del botón en el que se hizo clic, si se especifica.

event: Es el evento del botón en el que se hizo clic, si se especifica.
df-chip-clicked El usuario hizo clic en un chip. actionLink: href de anclaje del chip en el que se hizo clic (si se especifica).

text: Es el texto del chip en el que se hizo clic.
df-citation-clicked El usuario hizo clic en una cita. actionLink: href de anclaje de la cita.
df-info-card-clicked El usuario hizo clic en una tarjeta de información. actionLink: href de anclaje de la tarjeta de información.
df-list-element-clicked El usuario hizo clic en un elemento de la lista. event: Es el evento del elemento de lista en el que se hizo clic, si se especifica.
df-messenger-error Falla una solicitud al backend. error: Es el error que se produjo.
df-request-sent Una solicitud enviada al backend. requestBody: Es la solicitud que se envió.
df-response-received Llegó una respuesta al diálogo del agente. messages: Es la lista de mensajes de respuesta analizados.

raw: Es la respuesta literal que se recibió.
df-session-expired Venció la sesión con el agente. ninguno.
df-session-ended Finalizó la sesión. ninguno.
df-url-suggested URLs de recursos sugeridos. suggestedUrls: Es la lista de URLs sugeridas.
df-user-input-entered El usuario ingresó texto. input: Es el valor que ingresó el usuario.
df-chat-open-changed El chat está abierto o cerrado.

Solo estará activo si se usa df-messenger-chat-bubble.		 isOpen: Es el nuevo estado del chat.

Ejemplo de manejo de eventos:

document.addEventListener('df-user-input-entered', (event) => {
  // Extract the user input.
  const userInput = event.detail.input;
});
document.addEventListener('df-url-suggested', (event) => {
  // Extract the URLs suggested by the agent.
  const agentSuggestedUrls = event.detail.suggestedUrls;
});

Ejemplo de personalización

En el siguiente ejemplo, se muestra la personalización de HTML, la personalización de CSS y el control de eventos:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>My chat</title>
  <style>
    df-messenger {
      /*
       * Customize as required. df-messenger will fill the
       * space that is provided.
      */
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 320px;
    }
  </style>
  <script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
    location="global" <!-- TODO: update agent location as needed -->
    project-id="my-project-id" <!-- TODO: update project ID -->
    agent-id="my-agent-id" <!-- TODO: update agent ID -->
    language-code="en" <!-- TODO: update agent language as needed -->
>
  <df-messenger-chat
      chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
  ></df-messenger-chat>
</df-messenger>

<script>
  // An example of handling events: Navigate to the first suggested URL.
  document.addEventListener('df-url-suggested', (event) => {
    if (Array.isArray(event.detail.suggestedUrls) &&
      event.detail.suggestedUrls.length) {
      window.location.href = event.detail.suggestedUrls[0];
  }
});
</script>
</body>
</html>

Funciones de JavaScript

Dialogflow Messenger proporciona funciones a las que puedes llamar para modificar su comportamiento.

renderCustomText

Esta función procesa un mensaje de texto simple, como si proviniera del agente como una respuesta de texto simple o si lo ingresó el usuario final.

Argumentos:

  • string: mensaje de texto
  • boolean: Es verdadero para un mensaje del agente y falso del usuario final.

Volver:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);

renderCustomCard

Esta función renderiza una tarjeta personalizada, como si viniera de entrega de Dialogflow.

Argumentos:

  • payload: Es una lista de respuestas de carga útil personalizadas, que se definen en la sección Entrega.

Volver:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "rawUrl": "https://example.com/images/logo.png"
    },
    "anchor": {
      "href": "https://example.com",
      "target": "_blank"
    }
  }
];
dfMessenger.renderCustomCard(payload);

sendQuery

Esta función envía una consulta a la API de Dialogflow y espera la respuesta. Esto simula de manera efectiva una entrada del usuario final que normalmente se proporciona al diálogo del agente. La respuesta se manejará como lo haría cualquier consulta del usuario final.

Argumentos:

  • string: Búsqueda de texto

Volver:

  • Promise<void>: Es el valor que se muestra para la operación asíncrona.

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

Esta función envía una solicitud a la API de Dialogflow y espera la respuesta.

Argumentos:

  • string: Es el tipo de solicitud, admite query (consulta también sendQuery más arriba) y event (consulta evento personalizado).
  • any: Es una carga útil que corresponde al tipo de solicitud, que en este momento es una string para los dos tipos de solicitudes compatibles.

Volver:

  • Promise<void>: Es el valor que se muestra para la operación asíncrona.

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

Esta función configura los valores predeterminados para el campo queryParams de la solicitud detectIntent de la API de Dialogflow. Otros métodos de Dialogflow Messenger pueden reemplazar los valores predeterminados respectivos en los parámetros de consulta.

Argumentos:

  • object: Datos JSON. Para ver el esquema de los parámetros de consulta, visita QueryParameters.

Volver:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  timeZone: "America/New_York"
};
dfMessenger.setQueryParameters(queryParameters);

setContext

Esta función envía a Dialogflow información de la personalización generativa sobre el usuario final. Esta información se conservará durante el resto de la sesión.

Argumentos:

  • object: Datos JSON; consulta la documentación sobre personalización generativa

Volver:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

Esta función borra el almacenamiento persistente del diálogo del agente. También borra el estado actual del diálogo del agente.

Argumentos:

  • ninguno

Volver:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();

clearAuthentication

Esta función borra la autenticación del diálogo del agente.

Argumentos:

  • ninguno

Volver:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();

startNewSession

Esta función inicia una sesión nueva dentro del diálogo del agente. Puede mantener o restablecer el historial de mensajes actual. No borra la autenticación de los usuarios.

Argumentos:

Nombre Tipo Descripción
args object? Argumento opcional para configurar la creación de la nueva sesión.
args.retainHistory boolean? Marca opcional para conservar el historial. Si se establece como verdadera, se conservará el historial; de lo contrario, se borrará.

Volver:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

Esta función abre el chat. Llámalo en el elemento df-messenger-chat-bubble para abrir el chat. No hace nada si el chat ya está abierto.

Argumentos:

  • ninguno

Volver:

  • void

Por ejemplo:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

Esta función cierra el chat. Llámalo en el elemento df-messenger-chat-bubble para cerrar el chat. No hace nada si el chat ya está cerrado.

Argumentos:

  • ninguno

Volver:

  • void

Por ejemplo:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

Entrega

Cuando creas una entrega de tarjeta personalizada, puedes crear respuestas de texto y cargas útiles personalizadas. Las respuestas de texto se usan para texto sin formato y respuestas del agente de Markdown, y las cargas útiles personalizadas se usan para 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.

Respuesta de texto

Captura de pantalla de texto de Dialogflow Messenger

La respuesta de texto admite texto sin formato y Markdown.

Tipo de respuesta de información

Captura de pantalla del tipo de información de Dialogflow Messenger

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 object Imagen
image.rawUrl string La URL pública de la imagen
anchor object Fijo que se sigue cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string Destino del ancla; el valor predeterminado es _blank

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "anchor": {
          "href": "https://example.com"
        }
      }
    ]
  ]
}

Tipo de respuesta de descripción

Captura de pantalla del tipo de descripción de Dialogflow Messenger

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 array<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

Captura de pantalla del tipo de imagen de Dialogflow Messenger

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"
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-image-border-radius Opcional 8 px Radio del borde de la imagen

Tipo de respuesta en video

Captura de pantalla del tipo de video de Dialogflow Messenger

El tipo de respuesta en video renderiza un elemento de video que puede ser un video directo desde una URL, reproducirse directamente en la plataforma de mensajería o un vínculo a un video.

Nombre Tipo Descripción
type string Tipo de respuesta: “video”
title string Título de video opcional
source object La fuente del video
source.type string Un tipo de fuente de video, ya sea link o raw
source.anchor object Fijo que se sigue cuando se hace clic en el elemento
source.embeddedPlayer string Se puede insertar un video de tipo link en lugar de un vínculo a la página web del reproductor. Solo se implementa para un conjunto conocido de reproductores y admite youtube.
source.thumbnail object Miniatura que se muestra para anchor
source.thumbnail.rawUrl string La URL de la miniatura
source.rawUrl string URL para un video de tipo raw

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "video",
        "source": {
          "type": "link",
          "anchor": {
            "href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
          }
        }
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-video-width Opcional automático Ancho de un video (limitado por max-width\: 100%)
df-messenger-video-height Opcional automático Altura de un video
df-messenger-video-embed-width Opcional 560px Ancho de un video incorporado (limitado por max-width\: 100%)
df-messenger-video-embed-height Opcional 315px Altura de un video incorporado
df-messenger-video-border Opcional 1 px sólido #e0e0e0 Borde del video
df-messenger-video-border-radius Opcional 8 px Radio del borde del video

Tipo de respuesta de botón

Captura de pantalla del tipo de botón de Dialogflow Messenger

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 object 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
image object La imagen del botón tiene prioridad sobre icon.
image.rawUrl string La URL pública de la imagen
mode string Opcional, si se configura en "bloqueo", la entrada del usuario se inhabilita hasta que el usuario haga clic en el botón
text string Texto del botón
anchor object Fijo que se sigue cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string Destino del ancla; el valor predeterminado es _blank
event object Evento de Dialogflow que se activa cuando se hace clic en el botón

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "mode": "blocking",
        "text": "Button text",
        "anchor": {
          "href": "https://example.com"
        },
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-button-border Opcional ninguno Borde de un botón
df-messenger-button-border-radius Opcional 8 px Radio del borde de un botón
df-messenger-button-font-color Opcional #1f1f1f Color del texto de un botón
df-messenger-button-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes de un botón
df-messenger-button-font-size Opcional 14px Tamaño de fuente de un botón
df-messenger-button-padding Opcional 12px Relleno de un botón
df-messenger-button-icon-spacing Opcional 12px Espacio entre el ícono de botón y el texto
df-messenger-button-icon-font-size Opcional 24px Tamaño del ícono del botón
df-messenger-button-image-size Opcional 24px Tamaño de la imagen del botón
df-messenger-button-image-offset Opcional 0 Desplazamiento de la imagen del botón, permite que los valores negativos desplacen el relleno

Tipo de respuesta de lista

Captura de pantalla del tipo de lista de Dialogflow Messenger

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 object Evento de Dialogflow que se activa cuando se hace clic en la opción
anchor object Fijo que se sigue cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string Destino del ancla; el valor predeterminado es _blank
image object Imagen
image.rawUrl string La URL pública de la imagen

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": {
          "event": ""
        }
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

Tipo de respuesta de acordeón

Captura de pantalla del tipo de acordeón de Dialogflow Messenger

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 object Imagen
image.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": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Tipo de respuesta de chips de sugerencias

Captura de pantalla del tipo de chips de Dialogflow Messenger

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[].mode string Opcional, si se configura en "bloqueo", la entrada del usuario se inhabilita hasta que el usuario haga clic en el chip.
options[].text string Texto de la opción
options[].image object Opcional, imagen de la opción
options[].image.rawUrl string La URL pública de la opción para la imagen
options[].anchor object Opcional: Anchor que se debe seguir cuando se hace clic en el elemento
options[].anchor.href string URL del ancla
options[].anchor.target string Destino del ancla; el valor predeterminado es _blank

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "mode": "blocking",
            "text": "Chip 1",
            "image": {
              "rawUrl": "https://example.com/images/logo.png"
            },
            "anchor": {
              "href": "https://example.com"
            }
          },
          {
            "text": "Chip 2",
            "image": {
              "rawUrl": "https://example.com/images/logo.png"
            },
            "anchor": {
              "href": "https://example.com"
            }
          }
        ]
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-chips-spacing Opcional 10px Espacio encima de los chips en el mensaje anterior
df-messenger-chips-border-color Opcional #e0e0e0 Color del borde de un chip
df-messenger-chips-border-color-hover Opcional #e0e0e0 Color del borde de un chip cuando se coloca el cursor sobre él
df-messenger-chips-border-radius Opcional 999px Radio del borde de un chip
df-messenger-chips-background Opcional blanco Fondo de un chip
df-messenger-chips-background-hover Opcional rgba(68, 71, 70, 0.08) Fondo de un chip cuando se coloca el cursor sobre un elemento
df-messenger-chips-padding Opcional 6px 16px Relleno de un chip
df-messenger-chips-font-color Opcional negro Color del texto de un chip
df-messenger-chips-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes de un chip
df-messenger-chips-font-size Opcional 14px Tamaño del texto de un chip
df-messenger-chips-font-weight Opcional Normal Grosor de la fuente de un chip
df-messenger-chips-font-weight-hover Opcional Normal Grosor de la fuente de un chip cuando se coloca el cursor sobre él
df-messenger-chips-box-shadow Opcional 0 2px 2px 0 rgba(0, 0, 0, 0.24) Sombra difuminada de un chip

Tipo de respuesta de citas

Captura de pantalla del tipo de citas de Dialogflow Messenger

El tipo de respuesta "citas" proporciona al usuario final una lista de vínculos de citas en los que se puede hacer clic.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “match_Appointments”
citations array<object> Array de objetos Citation
citations[].title string Título de la cita
citations[].subtitle string Subtítulo de cita (actualmente ignorado)
citations[].anchor object Fijo que se sigue cuando se hace clic en el elemento
citations[].anchor.href string URL del ancla
citations[].anchor.target string Destino del ancla; el valor predeterminado es _blank

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "match_citations",
        "citations": [
          {
            "title": "Source 1",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/1"
            }
          },
          {
            "title": "Source 2",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/2"
            }
          }
        ]
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-citations-spacing Opcional 10px Espacio sobre las citas del mensaje anterior
df-messenger-citations-message-display Opcional bloque Define la visualización de las citas de arriba. Los valores permitidos son block o none.
df-messenger-citations-message-font-color Opcional #041e49 Color del texto de la nota anterior de las citas
df-messenger-citations-message-font-size Opcional 12px Tamaño del texto de la nota anterior de las citas
df-messenger-citations-flex-direction Opcional fila Propiedad de dirección flexible de las citas, se recomienda usar row (horizontal con saltos de línea) o column (vertical)
df-messenger-citations-border-color Opcional #1a73e8 Color del borde de una cita
df-messeenger-citations-border-color-hover Opcional #1a73e8 Color del borde de una cita cuando se coloca el cursor sobre un elemento
df-messenger-citations-border-radius Opcional 4 px Radio del borde de una cita
df-messenger-citations-padding Opcional 8 px Relleno de una cita
df-messenger-citations-background Opcional blanco Fondo de una cita
df-messenger-citations-background-hover Opcional rgba(68, 71, 70, 0.08) Fondo de una cita cuando se coloca el cursor sobre un elemento
df-messenger-citations-font-color Opcional #1a73e8 Color del texto de una cita
df-messenger-citations-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes de una cita
df-messenger-citations-font-size Opcional 11px Tamaño del texto de una cita
df-messenger-citations-icon-font-size Opcional 14px Tamaño del texto del ícono de una cita
df-messenger-citations-font-weight Opcional Normal Grosor de la fuente de una cita
df-messenger-citations-font-weight-hover Opcional Normal Grosor de la fuente de una cita cuando se coloca el cursor sobre un elemento
df-messenger-citations-icon-spacing Opcional 4 px Espacio entre el ícono y el texto de una cita
df-messenger-citations-box-shadow Opcional ninguno Sombra difuminada de una cita

Tipo de respuesta HTML

Captura de pantalla del tipo HTML de Dialogflow Messenger

El tipo de respuesta HTML le proporciona al usuario final un mensaje HTML.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “html”
html string Contenido de texto del mensaje, compatible con HTML

Etiquetas HTML admitidas:

  • a: Elemento fijo (se usa para crear hipervínculos)
  • b: Elemento en negrita (se usa para poner el texto en negrita)
  • i: Elemento en cursiva (se usa para escribir en cursiva)
  • u: Elemento subrayado (se usa para subrayar texto)
  • h1: Elemento de encabezado 1 (se usa para el encabezado principal de una página)
  • h2: Elemento de encabezado 2 (se utiliza para los subtítulos)
  • h3: Elemento de encabezado 3 (se usa para subtítulos)
  • p: Elemento de párrafo (se usa para crear párrafos de texto)
  • br: Elemento de salto de línea (se usa para crear saltos de línea dentro de un párrafo)
  • table: Elemento de tabla (se usa para crear tablas)
  • tr: Elemento de fila de la tabla (se usa para crear filas dentro de una tabla)
  • thead: Elemento de encabezado de la tabla (se usa para crear un encabezado dentro de una tabla)
  • th: Datos del encabezado de la tabla o elemento de la celda (se usa para crear celdas dentro de una fila de encabezado de tabla)
  • tbody: Elemento del cuerpo de la tabla (se usa para crear un cuerpo dentro de una tabla)
  • td: Datos de la tabla o elemento de celda (se usa para crear celdas dentro de una fila de la tabla).
  • ul: Elemento de lista sin ordenar (se usa para crear listas con viñetas)
  • ol: Elemento de lista ordenada (se usa para crear listas numeradas)
  • li: Elemento de elemento de lista (se usa para crear elementos dentro de una lista).
  • img: Elemento de imagen (que se usa para mostrar una imagen; consulta también url-allowlist más arriba)
  • div: Elemento de contenedor
  • span: Elemento de contenedor intercalado

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
      }
    ]
  ]
}

Cómo dar estilo a HTML y Markdown

En el caso de los elementos de anclaje (elemento HTML a y el vínculo de Markdown), se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-link-decoration Opcional guion bajo Decoración de un elemento de vínculo
df-messenger-link-font-color Opcional #0b57d0 Color de fuente de un elemento de vínculo no visitado
df-messenger-link-visited-font-color Opcional #0b57d0 Color de fuente de un elemento de vínculo visitado
df-messenger-link-hover-font-color Opcional #0b57d0 Color de la fuente cuando se coloca el cursor sobre un elemento de un vínculo
df-messenger-link-background Opcional transparent Fondo de un elemento de vínculo
df-messenger-link-padding Opcional 0 Padding de un elemento de vínculo
df-messenger-link-border Opcional ninguno Borde de un elemento de vínculo
df-messenger-link-border-radius Opcional 0 Radio de borde de un elemento de vínculo

Para los elementos de las tablas (elemento HTML table y tablas de Markdown), se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-table-font-size Opcional 14px Tamaño del texto en un elemento de la tabla
df-messenger-table-font-color Opcional #1f1f1f Color del texto en un elemento de la tabla
df-messenger-table-align Opcional izquierda Alineación del texto en una celda de una tabla
df-messenger-table-padding Opcional 0 Padding en una celda de una tabla
df-messenger-table-border-collapse Opcional separar Modo de contracción del borde de una tabla; usa separate para habilitar border-radius
df-messenger-table-border-radius Opcional 0 Radio de borde de una tabla
df-messenger-table-header-border-radius Opcional 0 Radio de borde del encabezado de la tabla
df-messenger-table-border-top Opcional ninguno Borde superior de la fila de una tabla
df-messenger-table-border-top-first Opcional ninguno Borde superior de la primera fila de la tabla
df-messenger-table-border-bottom Opcional ninguno Borde inferior de una fila de tabla
df-messenger-table-border-bottom-last Opcional ninguno Borde inferior de la última fila de la tabla
df-messenger-table-border-left Opcional ninguno Borde izquierdo de una celda de una tabla
df-messenger-table-border-left-first Opcional ninguno Borde a la izquierda de la primera celda de la tabla de una fila
df-messenger-table-border-right Opcional ninguno Borde derecho de una celda de una tabla
df-messenger-table-border-right-last Opcional ninguno Borde derecho de la última celda de la tabla de una fila
df-messenger-table-background Opcional transparent Fondo de una fila de tabla
df-messenger-table-even-background Opcional transparent Fondo de filas de tablas con números pares
df-messenger-table-odd-background Opcional transparent Fondo de filas de tablas con números impares
df-messenger-table-header-font-size Opcional 14px Tamaño del texto en un elemento de encabezado de tabla
df-messenger-table-header-font-weight Opcional negrita Grosor de la fuente en un elemento del encabezado de una tabla
df-messenger-table-header-font-color Opcional #1f1f1f Color del texto en un elemento de encabezado de tabla
df-messenger-table-header-align Opcional izquierda Alineación del texto en la celda de encabezado de una tabla
df-messenger-table-header-padding Opcional 0 Padding en una celda de encabezado de una tabla
df-messenger-table-header-border-top Opcional ninguno Borde superior de la fila del encabezado de la tabla
df-messenger-table-header-border-bottom Opcional ninguno Borde inferior de la fila del encabezado de la tabla
df-messenger-table-header-border-left Opcional ninguno Borde a la izquierda de una celda en la fila del encabezado de la tabla
df-messenger-table-header-border-left-first Opcional ninguno Borde a la izquierda de la primera celda del encabezado de la tabla
df-messenger-table-header-border-right Opcional ninguno Borde derecho de una celda en la fila del encabezado de la tabla
df-messenger-table-header-border-right-last Opcional ninguno Borde derecho de la última celda del encabezado de una tabla
df-messenger-table-header-background Opcional transparent Fondo de la fila del encabezado de la tabla

Tipo de respuesta de plantilla personalizada

Captura de pantalla del tipo de plantilla personalizada de Dialogflow Messenger

El tipo de respuesta de la plantilla personalizada procesa un elemento personalizado definido en el sitio web del cliente. El elemento no se coloca dentro de una tarjeta y siempre es independiente.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “custom_template”
name string Nombre del elemento personalizado
payload Object Carga útil para pasar al elemento personalizado

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "custom_template",
        "name": "custom-element-example",
        "payload": {
          "text": "Hello World"
        }
      }
    ]
  ]
}

En tu sitio web, el elemento personalizado debe estar registrado con el nombre exacto del campo name de la respuesta. El campo payload se pasa al elemento personalizado como dfPayload después de la construcción (pero antes de connectedCallback). El campo puede contener un JSON arbitrario. Además, dfResponseId se pasa al elemento.

Con la respuesta del ejemplo, este es un ejemplo de la implementación de un elemento personalizado:

class CustomElementExample extends HTMLElement {
  constructor() {
    super();
    // The `dfPayload` field will be provided before `connectedCallback` is
    // being called.
    this.dfPayload = null;
    // The `dfResponseId` field will be provided before `connectedCallback` is
    // being called.
    this.dfResponseId = null;
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  /** Web component Lifecycle method. */
  connectedCallback() {
    const div = document.createElement('div');

    // The `.text` must match the payload's structure in `richContent.payload`.
    div.innerText = this.dfPayload.text;

    this.renderRoot.appendChild(div);
  }
}

(function() {
  // Registers the element. This name must match the name in
  // `richContent.payload`.
  customElements.define('custom-element-example', CustomElementExample);
})();

Tipos de respuesta combinados

Captura de pantalla de la tarjeta personalizada de Dialogflow Messenger

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.

Este es un ejemplo con algunos de los elementos enumerados en la sección de entregas:

{
  "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",
        "anchor": {
          "href": "https://cloud.google.com/dialogflow/docs"
        }
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/case-studies"
            }
          },
          {
            "text": "Docs",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/docs"
            }
          }
        ]
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-card-background Opcional blanco Fondo de una tarjeta personalizada
df-messenger-card-padding Opcional 16 px Padding de elementos en una tarjeta personalizada
df-messenger-card-border Opcional 1 px sólido #e0e0e0 Borde de una tarjeta personalizada
df-messenger-card-border-radius Opcional 8 px Radio del borde de una tarjeta personalizada
df-messenger-card-border-top-left-radius Opcional 8 px Radio del borde superior izquierdo de una tarjeta personalizada
df-messenger-card-border-top-right-radius Opcional 8 px Radio del borde en la esquina superior derecha de una tarjeta personalizada
df-messenger-card-border-bottom-left-radius Opcional 8 px Radio del borde inferior izquierdo de una tarjeta personalizada
df-messenger-card-border-bottom-right-radius Opcional 8 px Radio del borde inferior derecho de una tarjeta
df-messenger-card-stack-border-top-left-radius Opcional 8 px El radio del borde superior izquierdo de las tarjetas personalizadas consecutivas anula el radio superior izquierdo
df-messenger-card-stack-border-top-right-radius Opcional 8 px El radio del borde superior derecho de las tarjetas personalizadas consecutivas anula el radio superior derecho.
df-messenger-card-stack-border-bottom-left-radius Opcional 8 px El radio del borde inferior izquierdo de las tarjetas personalizadas consecutivas anula el radio inferior izquierdo
df-messenger-card-stack-border-bottom-right-radius Opcional 8 px El radio del borde inferior derecho de las tarjetas personalizadas consecutivas anula el radio inferior derecho.
df-messenger-card-box-shadow Opcional 0 2px 2px 0 rgba(0, 0, 0, 0.24) Sombra difuminada de una tarjeta personalizada

Responder comentarios

Si los comentarios de respuesta están habilitados, el diálogo de chat agregará los botones Me gusta y No me gusta a la interfaz de usuario de forma predeterminada. Durante la conversación, un usuario final puede hacer clic en estos botones para proporcionar comentarios sobre las respuestas del agente. Si el usuario selecciona No me gusta, tiene la opción de proporcionar un motivo para los comentarios negativos.

Componente de comentarios personalizados

Para especificar un elemento de comentarios personalizados, debes definir un nuevo elemento personalizado en el sitio web. Para enviar los comentarios, el elemento debe emitir un evento df-custom-submit-feedback-clicked. El campo detail contenido debe ser una string.

class CustomFeedbackElement extends HTMLElement {
  constructor() {
    super();
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  // Web component Lifecycle method.
  connectedCallback() {
    const wrapper = document.createElement('div');

    // Build the component as required.
    const button = document.createElement('button');
    button.innerText = 'Submit';
    button.addEventListener('click', () => {
      this._onSubmitClick();
    });
    wrapper.appendChild(button);

    this.renderRoot.appendChild(wrapper);
  }

  // Called when Submit button is clicked.
  _onSubmitClick() {
    const event = new CustomEvent("df-custom-submit-feedback-clicked", {
      // `detail` may be any string,
      // this will be sent to the backend to be stored.
      detail: JSON.stringify({
        "usefulness": 2,
        "accuracy": 3,
      }),
      // Required to propagate up the DOM tree
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
      bubbles: true,
      // Required to propagate across ShadowDOM
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
      composed: true,
   });
   this.dispatchEvent(event);
  }
}

(function() {
  // Registers the element. This name must be "df-external-custom-feedback".
  customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();

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.