Há muitas personalizações de HTML que podem ser aplicadas a uma caixa de diálogo de chat.
Opções do elemento de chat HTML
O elemento filho do elemento df-messenger
pode ser:
df-messenger-chat
: a caixa de diálogo do agente está sempre abertadf-messenger-chat-bubble
: a caixa de diálogo do agente pode ser aberta ou fechada com um botão de balão para abrir ou fechar.
Personalizações em HTML para df-messenger
O elemento HTML df-messenger
tem os seguintes atributos:
Atributo | Política de entrada | Valor |
---|---|---|
agent-id |
Obrigatório | Código do agente associado ao agente do Dialogflow. |
allow-feedback |
Opcional | Defina como all para permitir que os usuários finais forneçam feedback sobre as respostas do agente. |
language-code |
Obrigatório | Código do idioma padrão. |
project-id |
Obrigatório | ID do projeto para o 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. É possível usar um manipulador de eventos que será chamado para esse evento e produzirá a primeira mensagem do agente. |
oauth-client-id |
Opcional | Obrigató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 Messenger estiver ativado, os usuários não autenticados poderão interagir com o agente. Se o valor for informado, a caixa de diálogo do agente vai aparecer sobreposta a "Request Authentication". Esse 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 devem ser armazenadas. Usar none apagará todas as mensagens quando a página for atualizada ou recarregada. O padrão é sessionStorage. |
session-ttl |
Opcional | Definido como uma duração em segundos para manter a sessão, precisa ser estritamente abaixo de 86.400 (1 dia) e ter como padrão 1800 (30 min). |
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 nas 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 tamanho é ilimitado. O padrão é 256. Documentação adicional. |
Personalizações em HTML para df-messenger-chat
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 do chat, mostrado acima, abaixo de chat-title |
chat-title-icon |
Opcional | O ícone mostrado no título do chat, mostrado acima dele, à esquerda de chat-title por padrão |
bot-writing-text |
Opcional | O texto que é mostrado enquanto o agente está gravando |
bot-writing-image |
Opcional | A imagem que é mostrada enquanto o agente está gravando. 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 que vai aparecer no campo de entrada enquanto estiver vazio. O padrão é "Pergunte algo...". |
bot-actor-image |
Opcional | Origem da imagem que será usada na imagem do ator do agente. Será exibido em cada grupo de respostas do agente. |
user-actor-image |
Opcional | Origem da imagem a ser usada na imagem do usuário. Aparecerá em cada mensagem do usuário. |
Personalizações em HTML para df-messenger-chat-bubble
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 bate-papo está inicialmente aberto. Se ela não for definida, o chat vai lembrar do último estado dele. |
chat-icon |
Opcional | Ícone do balão do chat. Precisa ser um URI disponível publicamente. |
chat-close-icon |
Opcional | Í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 bate-papo é posicionada em relação ao balão de abertura ou fechamento. O valor é duas palavras direcional (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 direção define a direção de expansão principal para longe do balão. Por exemplo: top-left é colocado em cima do balão e se expande para a esquerda e para cima (para longe da bolha). |
chat-width |
Opcional | Define a largura da janela de bate-papo. Valores numéricos (em pixels). O padrão é 320 pixels. |
chat-height |
Opcional | Define a altura da janela de chat. Valores numéricos (em pixels). O padrão é 480 pixels. |
allow-fullscreen |
Opcional | Define se a janela de chat pode ser aberta em tela cheia. Se definida como always , o app abre em tela cheia em todos os tamanhos de tela. Se definida como small , abre em tela cheia em 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 bate-papo está inicialmente aberto na forma minimizada. Usa a mesma lógica que anchor . Se especificado, executa o intent inicial no carregamento. |