Personalizaciones de HTML de Dialogflow CX Messenger

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

Opciones de elementos de chat HTML

El elemento secundario del elemento df-messenger puede ser uno 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 para abrir o cerrar.

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 al agente de Dialogflow CX.
allow-feedback	Opcional	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	Es un evento personalizado que se invoca cuando se abre el diálogo de chat. Si el chat está abierto inicialmente (como con df-messenger-chat o expanded/minimized df-messenger-chat-bubble), esto se activa cuando se carga la página. Puedes usar un controlador de eventos que se llame para este evento y que produzca el primer mensaje del agente.
oauth-client-id	Opcional	Es obligatorio para la autenticación de OAuth. El valor predeterminado es nulo. Si no proporcionas este valor y habilitas el acceso no autenticado de Dialogflow CX Messenger, los usuarios no autenticados podrán interactuar con el agente. Si proporcionas este valor, el diálogo del agente muestra una superposición de "Solicitar autenticación" que requiere que los usuarios accedan antes de poder usar el agente (puedes controlar el texto con el atributo request-auth-text).
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. 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 86400 (1 d) y el valor predeterminado es 1800 (30 min).
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 HTML o Markdown deben comenzar con uno de los prefijos de la lista. Usa * para permitir todas las URLs.
max-query-length	Opcional	Define la longitud máxima de una consulta de texto. Si el valor es negativo, la longitud es ilimitada. La configuración predeterminada es 256. Documentación adicional.

Personalizaciones de HTML para df-messenger-chat

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. Se muestra en la parte superior del cuadro de chat.
chat-subtitle	Opcional	Es el subtítulo del cuadro de chat. Se muestra debajo de chat-title.
chat-title-icon	Opcional	Es el ícono que se muestra en el título del cuadro de chat. Se muestra sobre el cuadro de chat, a la izquierda de chat-title de forma predeterminada.
bot-writing-text	Opcional	Es el texto que se muestra mientras el agente escribe.
bot-writing-image	Opcional	Es la 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 "Pregunta algo…".
bot-actor-image	Opcional	Es la fuente de la imagen que se usará para la imagen del actor del agente. Se muestra 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 muestra en cada mensaje del usuario.

Personalizaciones de HTML para df-messenger-chat-bubble

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 se establece, el chat recordará su último estado.
chat-icon	Opcional	Es el ícono de la burbuja de chat. Debe ser un URI disponible de forma pública.
chat-close-icon	Opcional	Es el ícono de cierre de la burbuja de chat. Debe ser un URI disponible de forma pública.
chat-collapse-icon	Opcional	Es el ícono del botón para 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 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 define la dirección de expansión principal que se aleja de la burbuja. Por ejemplo: top-left se coloca sobre 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. 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 establece en always, se abre en pantalla completa para todos los tamaños de pantalla. Si se establece en 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 establece.
minimized	Opcional	Determina si el chat se abre inicialmente en un formato minimizado. Usa la misma lógica que anchor. Si se especifica, este atributo tiene prioridad sobre expanded. Esto también activa el intent inicial durante la carga.