Existen muchas personalizaciones de HTML que puedes aplicar a los diálogos de chat.
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á abiertodf-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 | 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 "Solicitar autenticación" (se puede controlar el texto; consulta la notificación request-auth-text , 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. |
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 | 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...". |
bot-actor-image |
Opcional | 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 | Fuente de la imagen que se utilizará para la imagen del actor del usuario. Se mostrará 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 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. |
minimized |
Opcional | Determina si el chat está abierto inicialmente de forma minimizada. Usa la misma lógica que anchor . Si se especifica, ejecutará el intent inicial durante la carga. |