Personalizaciones de HTML de Dialogflow CX Messenger

Hay muchas personalizaciones de HTML que puedes aplicar a un cuadro de 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 cuadro de diálogo del agente está siempre abierto
  • df-messenger-chat-bubble: se puede abrir o cerrar el cuadro de diálogo del agente 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 ID de agente asociado al agente de Dialogflow.
allow-feedback Opcional Defínelo como all para permitir que los usuarios finales envíen comentarios sobre las respuestas del agente.
language-code Obligatorio Código de idioma predeterminado.
project-id Obligatorio 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 llame para este evento y que genere el primer mensaje del agente.
oauth-client-id Opcional Obligatorio para la autenticación OAuth. El valor predeterminado es null. Si no se proporciona ningún 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 "Solicitar autenticación" (el texto se puede controlar; consulta la notificación request-auth-text), que requiere que el usuario inicie sesión para poder usar el agente.
storage-option Opcional Especifica el almacenamiento local de los mensajes de la conversación. Usa none si no quieres que se almacenen los mensajes. Si usas none, se borrarán todos los mensajes cuando se actualice o se vuelva a cargar la página. El valor predeterminado es sessionStorage.
session-ttl Opcional Se define 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 1800 (30 minutos).
url-allowlist Opcional Permite que las imágenes se carguen desde una lista de prefijos de URL separados por comas. Las URLs de las imágenes que se usen en respuestas HTML o Markdown deben empezar por uno de los prefijos que se indican a continuación. 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. El valor predeterminado es 256. Documentación adicional

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 se muestra encima.
chat-subtitle Opcional El subtítulo del cuadro de chat, que se muestra encima, debajo del chat-title
chat-title-icon Opcional El icono que se muestra en el título del cuadro de chat, que aparece encima de él, a la izquierda de chat-title de forma predeterminada
bot-writing-text Opcional El texto que se muestra mientras el agente escribe
bot-writing-image Opcional La imagen que se muestra mientras el agente escribe. 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 mientras esté vacío. El valor predeterminado es "Pregunta 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 va a usar para la imagen del actor del usuario. Se mostrará en el mensaje de cada usuario.

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 Valor booleano que determina si la conversación se abre inicialmente. Si no se define, el chat recordará su último estado.
chat-icon Opcional Icono del cuadro de chat. Debe ser un URI disponible públicamente.
chat-close-icon Opcional Icono de cerrar del cuadro de chat. Debe ser un URI disponible públicamente.
chat-collapse-icon Opcional Icono del botón para contraer la barra de título. Debe ser un URI disponible públicamente.
anchor Opcional Define dónde se coloca el cuadro de diálogo del chat en relación con la burbuja abierta o cerrada. 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, la dirección principal de expansión de la burbuja. Por ejemplo, top-left se coloca encima de la burbuja y se expande hacia la izquierda y hacia arriba (alejándose de la burbuja).
chat-width Opcional Define la anchura 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 a pantalla completa. Si se define como always, se abre en pantalla completa para todos los tamaños de pantalla. Si se define 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 han definido.
minimized Opcional Determina si el chat se abre inicialmente en forma minimizada. Usa la misma lógica que anchor. Ejecutará el intent inicial al cargar si se especifica.