Personalizações de HTML do Dialogflow CX Messenger

Existem muitas personalizações de HTML que pode aplicar a uma caixa de diálogo de chat.

Opções de elementos de chat HTML

O elemento secundário do elemento df-messenger pode ser qualquer 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 aberto ou fechado

Personalizações de HTML para df-messenger

O elemento HTML df-messenger tem os seguintes atributos:

Atributo Política de introdução Valor
agent-id Obrigatória ID do agente associado ao agente do Dialogflow.
allow-feedback Opcional Definido como all para permitir que os utilizadores finais forneçam feedback sobre as respostas do agente.
language-code Obrigatória Código de idioma predefinido.
project-id Obrigatória ID do projeto do agente.
location Opcional A região do agente. O valor predefinido é global.
intent Opcional Um evento personalizado que é invocado quando a caixa de diálogo do chat é aberta. Pode usar um controlador de eventos que é chamado para este evento e produz a primeira mensagem do agente.
oauth-client-id Opcional Obrigatório para a autenticação OAuth. O valor predefinido é nulo. Se o valor não for fornecido e o acesso não autenticado do Dialogflow CX Messenger estiver ativado, os utilizadores não autenticados podem interagir com o agente. Se o valor for fornecido, a caixa de diálogo do agente é sobreposta com a opção "Pedir autenticação" (o texto pode ser controlado, consulte a notificação request-auth-text), que exige que o utilizador inicie sessão antes de poder usar o agente.
storage-option Opcional Especifica o armazenamento local para mensagens de conversas. Use none se as mensagens não devem ser armazenadas. A utilização de none limpa todas as mensagens quando a página é atualizada ou recarregada. A predefinição é sessionStorage.
session-ttl Opcional Definido para uma duração em segundos para manter a sessão. Tem de ser estritamente inferior a 86 400 (1 dia) e é, por predefinição, 1800 (30 minutos).
url-allowlist Opcional Permite o carregamento de imagens a partir de uma lista de prefixos de URL separados por vírgulas. Os URLs de imagens usados em respostas HTML ou Markdown têm de começar por um dos prefixos indicados. 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 é ilimitado. A predefinição é 256. Documentação adicional.

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

Captura de ecrã do Dialogflow Messenger

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

Atributo Política de introdução Valor
chat-title Opcional O título da caixa de chat, apresentado acima da mesma.
chat-subtitle Opcional O subtítulo da caixa de chat, apresentado acima da mesma, abaixo de chat-title
chat-title-icon Opcional O ícone apresentado no título da caixa de chat, apresentado acima, à esquerda do chat-title por predefinição
bot-writing-text Opcional O texto apresentado enquanto o agente escreve
bot-writing-image Opcional A imagem que é apresentada enquanto o agente está a escrever. Tem prioridade sobre bot-writing-text.
request-auth-text Opcional O texto do botão caso seja necessária autenticação.
placeholder-text Opcional Texto a apresentar no campo de entrada enquanto estiver vazio. A predefinição é "Pedir algo…".
bot-actor-image Opcional Origem da imagem a usar para a imagem do ator do agente. É apresentado em cada grupo de respostas de agentes.
user-actor-image Opcional Origem da imagem a usar para a imagem do ator do utilizador. É apresentado em cada mensagem do utilizador.

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

Captura de ecrã do Dialogflow 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 introdução Valor
expanded Opcional Booleano que determina se o chat está inicialmente aberto. Se não estiver definida, o chat lembra-se do último estado.
chat-icon Opcional O ícone do balão de chat. Tem de ser um URI disponível publicamente.
chat-close-icon Opcional O ícone de fechar do balão de chat. Tem de ser um URI disponível publicamente.
chat-collapse-icon Opcional O ícone do botão de redução na barra de título. Tem de 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 abertura ou fecho. O valor é composto por duas palavras de direção (top, bottom, left, right) delimitadas por -. O valor predefinido é top-left. A primeira direção define o ponto de ancoragem e a segunda direção define a direção de expansão principal a partir da bolha. Por exemplo: top-left é colocado na parte superior da bolha e expande-se para a esquerda e para cima (afastando-se da bolha).
chat-width Opcional Define a largura da janela de chat. Valores numéricos (em píxeis). A predefinição é 320 px.
chat-height Opcional Define a altura da janela de chat. Valores numéricos (em píxeis). A predefinição é 480 px.
allow-fullscreen Opcional Define se a janela de chat pode ser aberta em ecrã inteiro. Se estiver definido como always, abre em ecrã inteiro para todos os tamanhos de ecrã. Se estiver definido como small, abre em ecrã inteiro para tamanhos de ecrã inferiores a 500 px. Caso contrário, abre como uma janela normal. Pode substituir chat-width, chat-height e anchor, se estiverem definidos.
minimized Opcional Determina se o chat está inicialmente aberto de forma minimizada. Usa a mesma lógica que anchor. Executa o intent inicial no carregamento, se especificado.