Personalizaciones de HTML de Dialogflow CX Messenger

Puedes aplicar muchas personalizaciones de HTML a un diálogo de chat.

Opciones de elementos de chat en HTML

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

  • 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 abierto o cerrado.

Personalizaciones de HTML para df-messenger

El elemento HTML df-messenger tiene los siguientes atributos:

Atributo Política de entrada Valor
agent-id Obligatorio Es el ID del agente asociado con el agente de Dialogflow CX.
allow-feedback Opcional Se establece en all para permitir que los usuarios finales proporcionen comentarios sobre las respuestas del agente.
language-code Obligatorio Código de idioma predeterminado.
project-id Obligatorio Es el ID del proyecto del 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 cuadro de diálogo de chat. Puedes usar un controlador de eventos que se llamará para este evento y producirá el primer mensaje del agente.
oauth-client-id Opcional Se requiere para la autenticación OAuth. El valor predeterminado es nulo. Si no se proporciona el valor y se habilita el acceso no autenticado a Dialogflow CX Messenger, los usuarios no autenticados podrán 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 la notificación request-auth-text), que requiere que el usuario acceda antes de 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 vuelva a cargar la página. El valor predeterminado 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 (1 día) y el valor predeterminado es 1,800 (30 minutos).
url-allowlist Opcional Habilita la carga de imágenes desde una lista de prefijos de URL separados por comas. Las URLs de imágenes que se usan en las respuestas de HTML o Markdown deben comenzar con uno de los prefijos que se indican en la lista. Usa * para permitir todas las URLs.
max-query-length Opcional Define la longitud máxima para una búsqueda de texto. Si el valor es negativo, la longitud es ilimitada. El valor predeterminado es 256. Documentación adicional.

Personalizaciones de HTML para df-messenger-chat

Captura de pantalla de Dialogflow CX Messenger

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

Atributo Política de entrada Valor
chat-title Opcional Es el título del cuadro de chat, que se muestra arriba de él.
chat-subtitle Opcional El subtítulo del cuadro de chat, que se muestra arriba, debajo de chat-title
chat-title-icon Opcional El ícono que se muestra en el título del cuadro de chat, que se muestra arriba, a la izquierda del chat-title de forma predeterminada
bot-writing-text Opcional El texto que se muestra mientras el agente escribe
bot-writing-image Opcional Imagen que se muestra mientras el agente escribe. Tiene prioridad sobre bot-writing-text.
request-auth-text Opcional Es el texto del botón en caso de que se requiera autenticación.
placeholder-text Opcional Es el texto que se mostrará en el campo de entrada mientras esté vacío. El valor predeterminado es “Pregúntale algo…”.
bot-actor-image Opcional Es la fuente de la imagen que se usará para la imagen del actor del agente. Se mostrará en cada grupo de respuestas del agente.
user-actor-image Opcional Es la fuente de la imagen que se usará para la imagen del actor del usuario. Se mostrará en cada mensaje del usuario.

Personalizaciones de HTML para df-messenger-chat-bubble

Captura de pantalla de Dialogflow CX 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 se abre inicialmente. Si no se establece, el chat recordará su último estado.
chat-icon Opcional Ícono de la burbuja de chat. Debe ser un URI disponible de forma pública.
chat-close-icon Opcional Ícono de cierre de la burbuja de chat. Debe ser un URI disponible de forma pública.
chat-collapse-icon Opcional Ícono del botón de contraer en la barra de título. Debe ser un URI disponible de forma pública.
anchor Opcional Define dónde se coloca el diálogo de chat en relación con la burbuja de abrir o cerrar. El valor consta de 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 de expansión principal lejos de la burbuja. Por ejemplo, top-left se coloca sobre la burbuja y se expande hacia la izquierda y hacia arriba (alejándose de la burbuja).
chat-width Opcional Define el ancho de la ventana de chat. Valores numéricos (en píxeles). El valor predeterminado es 320 px.
chat-height Opcional Define la altura de la ventana de chat. Valores numéricos (en píxeles). El valor predeterminado es 480 px.
allow-fullscreen Opcional Define si la ventana de chat se puede abrir en pantalla completa. Si se configura como always, se abre en pantalla completa para todos los tamaños de pantalla. Si se configura como small, se abre en 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 configuran.
minimized Opcional Determina si el chat se abre inicialmente en forma minimizada. Usa la misma lógica que anchor. Ejecutará el intent inicial en la carga si se especifica.