Personalizações de HTML do Dialogflow CX Messenger

Há muitas personalizações de HTML que podem ser aplicadas a uma caixa de diálogo de chat.

Opções de elementos de chat em HTML

O elemento filho do elemento df-messenger pode ser um destes:

  • df-messenger-chat: a caixa de diálogo do agente está sempre aberta
  • df-messenger-chat-bubble: a caixa de diálogo do agente pode ser aberta ou fechada com um botão de bolha aberta ou fechada

Personalizações de HTML para df-messenger

O elemento HTML df-messenger tem os seguintes atributos:

Atributo Política de entrada Valor
agent-id Obrigatório ID do agente associado ao agente do Dialogflow CX.
allow-feedback Opcional Defina como all para permitir que os usuários finais enviem feedback sobre as respostas do agente.
language-code Obrigatório Código de idioma padrão.
project-id Obrigatório ID do projeto do agente.
location Opcional A região do agente. O valor padrão é global.
intent Opcional Um evento personalizado que será invocado quando a caixa de diálogo de chat for aberta. Você pode usar um manipulador de eventos que será chamado para esse evento e produzirá a primeira mensagem do agente.
oauth-client-id Opcional Necessário para a autenticação OAuth. O valor padrão é nulo. Se o valor não for fornecido e o acesso não autenticado do Dialogflow CX Messenger estiver ativado, os usuários não autenticados poderão interagir com o agente. Se o valor for fornecido, a caixa de diálogo do agente será sobreposta com um texto "Solicitar autenticação" (o texto pode ser controlado, consulte a notificação request-auth-text), que exige que o usuário faça login antes de usar o agente.
storage-option Opcional Especifica o armazenamento local para mensagens de conversa. Use none se as mensagens não puderem ser armazenadas. O uso de none vai limpar todas as mensagens quando a página for atualizada ou recarregada. O padrão é sessionStorage.
session-ttl Opcional Defina uma duração em segundos para manter a sessão. Ela precisa ser estritamente inferior a 86.400 (1 dia) e o padrão é 1.800 (30 minutos).
url-allowlist Opcional Permite que as imagens sejam carregadas de uma lista de prefixos de URL separados por vírgulas. Os URLs de imagem usados em respostas HTML ou Markdown precisam começar com um dos prefixos listados. Use * para permitir todos os URLs.
max-query-length Opcional Define o comprimento máximo de uma consulta de texto. Se o valor for negativo, o comprimento será ilimitado. O padrão é 256. Documentação adicional.

Personalizações de HTML para df-messenger-chat

Captura de tela do Dialogflow CX Messenger

O elemento HTML df-messenger-chat tem os seguintes atributos:

Atributo Política de entrada Valor
chat-title Opcional O título da caixa de chat, mostrado acima dela.
chat-subtitle Opcional O subtítulo da caixa de chat, mostrado acima dela, abaixo do chat-title
chat-title-icon Opcional O ícone mostrado no título da caixa de chat, mostrado acima dela, à esquerda do chat-title por padrão
bot-writing-text Opcional O texto mostrado enquanto o agente está escrevendo
bot-writing-image Opcional A imagem mostrada enquanto o agente está escrevendo. Tem prioridade sobre bot-writing-text.
request-auth-text Opcional O texto do botão caso a autenticação seja necessária.
placeholder-text Opcional Texto a ser mostrado no campo de entrada enquanto ele estiver vazio. O padrão é "Pergunte algo…".
bot-actor-image Opcional Origem da imagem a ser usada para a imagem do ator do agente. Será mostrado em cada grupo de respostas do agente.
user-actor-image Opcional Origem da imagem a ser usada para a imagem do ator do usuário. Será mostrado em cada mensagem do usuário.

Personalizações de HTML para df-messenger-chat-bubble

Captura de tela do Dialogflow CX Messenger

O elemento HTML df-messenger-chat-bubble tem os mesmos atributos que df-messenger-chat e os seguintes atributos adicionais:

Atributo Política de entrada Valor
expanded Opcional Booleano que determina se o chat está inicialmente aberto. Se não estiver definido, o chat vai lembrar o último estado.
chat-icon Opcional O ícone da bolha de chat. Precisa ser um URI disponível publicamente.
chat-close-icon Opcional O ícone de fechamento da bolha de chat. Precisa ser um URI disponível publicamente.
chat-collapse-icon Opcional O ícone do botão de recolhimento na barra de título. Precisa ser um URI disponível publicamente.
anchor Opcional Define onde a caixa de diálogo de chat é colocada em relação à bolha aberta ou fechada. O valor é duas palavras de direção (top, bottom, left, right) delimitadas por -. O valor padrão é top-left. A primeira direção define o ponto de ancoragem, e a segunda direção define a direção principal de expansão para longe da bolha. Por exemplo: top-left é colocado na parte de cima da bolha e se expande para a esquerda e para cima (longe da bolha).
chat-width Opcional Define a largura da janela de chat. Valores numéricos (em pixels). O padrão é 320 px.
chat-height Opcional Define a altura da janela de chat. Valores numéricos (em pixels). O padrão é 480 px.
allow-fullscreen Opcional Define se a janela de chat pode ser aberta em tela cheia. Se definido como always, será aberto em tela cheia para todos os tamanhos de tela. Se definido como small, será aberto em tela cheia para tamanhos de tela abaixo de 500 px. Caso contrário, será aberto como uma janela normal. Pode substituir chat-width, chat-height e anchor se definido.
minimized Opcional Determina se o chat está inicialmente aberto de forma minimizada. Usa a mesma lógica que anchor. Vai executar a intent inicial no carregamento, se especificado.