Personalizações de HTML do Dialogflow CX Messenger

É possível aplicar várias personalizações de HTML a uma caixa de diálogo de chat.

Opções de elementos de chat HTML

O elemento filho do elemento df-messenger pode ser um dos seguintes:

  • 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 balão de abrir ou fechar.

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 de CX 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 é invocado quando a caixa de diálogo do chat é aberta. Se o chat estiver aberto inicialmente (como com df-messenger-chat ou expanded/minimized df-messenger-chat-bubble), isso será acionado no carregamento de página. É possível usar um manipulador de eventos que é chamado para esse evento e produz a primeira mensagem do agente.
oauth-client-id Opcional Obrigatório para a autenticação OAuth. O padrão é nulo. Se você não fornecer esse valor e ativar o acesso não autenticado do Dialogflow CX Messenger, os usuários não autenticados poderão interagir com o agente. Se você fornecer esse valor, a caixa de diálogo do agente vai mostrar uma sobreposição "Solicitar autenticação" que exige que os usuários façam login antes de usar o agente. É possível controlar o texto usando o atributo request-auth-text.
storage-option Opcional Especifica o armazenamento local para mensagens de conversa. Use none se as mensagens não precisarem ser armazenadas. O uso de none limpa todas as mensagens quando a página é 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 menor que 86.400 (1 dia) e o padrão é 1.800 (30 minutos).
url-allowlist Opcional Permite que as imagens sejam carregadas de uma lista separada por vírgulas de prefixos de URL. 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 tamanho 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

Barra lateral 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 na parte de cima da caixa de chat.
chat-subtitle Opcional O subtítulo da caixa de chat. Mostrado abaixo de chat-title.
chat-title-icon Opcional O ícone mostrado no título da caixa de chat. Mostrado acima da caixa de chat, à esquerda do chat-title por padrão.
bot-writing-text Opcional O texto que aparece 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. Mostrado em cada grupo de respostas do agente.
user-actor-image Opcional Origem da imagem do ator do usuário. Mostrado em cada mensagem do usuário.

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

Balão de chat 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 é aberto inicialmente. Se não for definido, o chat vai lembrar do último estado.
chat-icon Opcional O ícone do balão do chat. Precisa ser um URI disponível publicamente.
chat-close-icon Opcional O ícone "Fechar" do balão do chat. Precisa ser um URI disponível publicamente.
chat-collapse-icon Opcional O ícone do botão de recolher na barra de título. Precisa ser um URI disponível publicamente.
anchor Opcional Define onde a caixa de diálogo do chat é colocada em relação ao balão de abrir ou fechar. O valor é composto por 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 fixação, e a segunda define a direção principal de expansão para longe do balão. Por exemplo: top-left é colocado na parte de cima do balão e se expande para a esquerda e para cima (para longe do balão).
chat-width Opcional Define a largura da janela de chat. Valores numéricos (em pixels). O padrão é 320px.
chat-height Opcional Define a altura da janela de chat. Valores numéricos (em pixels). O padrão é 480px.
allow-fullscreen Opcional Define se a janela de chat pode ser aberta em tela cheia. Se definido como always, abre em tela cheia para todos os tamanhos de tela. Se definido como small, abre em tela cheia para tamanhos de tela menores que 500 px. Caso contrário, abre como uma janela normal. Pode substituir chat-width, chat-height e anchor, se definido.
minimized Opcional Determina se o chat é aberto inicialmente de forma minimizada. Usa a mesma lógica de anchor. Se especificado, esse atributo tem precedência sobre expanded. Isso também aciona o intent inicial no carregamento.