Web
O que é
É uma janela de chat responsiva que pode ser incluída em uma página web ou aplicativo.
Na prática
Para mostrar a chamada ao chatbot no canto inferior direito de uma página é necessário incluir um script gerado pela plataforma Serprobots no <header>
da página HTML.
Fica a dica
Para disponibilizar o chatbot em aplicativos móveis, o Serprobots oferece um plugin escrito em Flutter.
Detalhes da tela
Ao acionar Configurar Canal será exibida uma tela com as opções de configuração do canal.
O canal web possui diversas opções de customização:
Campo | Descrição |
---|---|
Nome do bot | Nome do chatbot que aparecerá na interface web. Deve conter apenas letras, números e espaços. |
Título do cabeçalho | Texto que aparecerá no cabeçalho da janela web. |
Iniciar aberto | Define se a janela web do chatbot iniciará aberta ou fechada. |
Texto do Trigger | Texto que será exibido ao passar o mouse em cima do trigger. |
Cor do background do trigger | Cor da área onde aparecerá o texto do trigger. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Imagem do Trigger | Imagem que será apresentada no botão do trigger. |
Imagem para Fechar o Trigger | Imagem que será apresentada para fechar a janela web do chatbot quando esta estiver aberta. |
Cabeçalho da janela
Campo | Descrição |
---|---|
Tamanho da Fonte do Cabeçalho | Deve ser definido de acordo com o conjunto: x-small, small, medium, large, x-large. |
Redirecionar ao Fechar | Item opcional que deverá ser preenchido com um domínio para o qual se deseje ser redirecionado ao fechar a janela do chatbot. |
Ícone Fechar | Ícone a ser apresentado no canto direito do cabeçalho da janela do chatbot para a função fechar. |
Esconder ícone fechar | Informa se o ícone fechar do cabeçalho será exibido. |
Cor do texto do cabeçalho | Cor a ser apresentada no texto cabeçalho. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Esconder ícone minimizar | Informa se o ícone minimizar no cabeçalho será exibido. |
Avatar do Cabeçalho | Imagem que aparecerá no canto esquerdo do cabeçalho da janela do chatbot. |
Cor de fundo do cabeçalho | Cor a ser apresentada na área do cabeçalho. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL |
Ícone Minimizar | Ícone a ser apresentado no cabeçalho da janela do chatbot para a função minimizar. |
Lista de mensagens
Campo | Descrição |
---|---|
Exibir o avatar | Define se os avatares do chatbot e do usuário devem aparecer ao lado de cada mensagem. |
Cor da fonte da caixa de mensagem do bot | Cor do texto das mensagens respondidas pelo chatbot. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Avatar do Bot | Imagem definida para representar o chatbot. |
Imagem de Aguarde/Digitando | Imagem a ser apresentada enquanto usuário espera resposta do chatbot. |
Formato da Data | Define como deve ser exibida a data-hora apresentada embaixo dos balões de mensagens. |
Cor de fundo da caixa de mensagem do usuário | Cor da área do balão onde serão exibidas das mensagens do usuário. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Tamanho da fonte da mensagem | Deve ser definido de acordo com o conjunto: x-small, small, medium, large, x-large. |
Cor do texto da mensagem de erro | Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Cor de fundo da mensagem de erro | Cor da área do balão onde serão exibidas as mensagens de erro. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Exibir digitando | Define se deve ser a apresentada mensagem enquanto usuário espera resposta do chatbot. |
Tamanho da fonte da data | Deve ser definido de acordo com o conjunto: x-small, small, medium, large, x-large. |
Mensagem de Aguarde/Digitando | Mensagem a ser apresentada enquanto usuário espera resposta do chatbot. |
Exibir a data da mensagem | Define se deve ser exibida a data-hora embaixo dos balões de mensagens. |
Avatar do Usuário | Imagem definida para representar o usuário. |
Cor de fundo da caixa de mensagem do bot | Cor da área do balão onde serão exibidas as mensagens do chatbot. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Cor da fonte da caixa de mensagem do usuário | Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Cor de fundo da lista de mensagens | Cor da área serão exibidos os balões de conversação.Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Caixa de entrada
Campo | Descrição |
---|---|
Exibir entrada de mensagens | Define se estará disponível uma caixa de texto para a escrita de mensagens do usuário. |
Desabilitar entrada de mensagens | Define que não seja possível o envio de mensagens do usuário. A caixa de mensagens fica desabilitada. |
Limpar entrada de texto | Define se a mensagem enviada pelo usuário será apagada da caixa de mensagens após seu envio. |
Usar "Enter" para enviar mensagem | Define se deve ser permitido o envio da mensagem do usuário ao teclar |
Tamanho máximo da mensagem | Especifica a quantidade máxima de caracteres que a mensagem do usuário poderá ter. |
Placeholder da Entrada de Texto | Texto que poderá ser exibido na caixa de texto onde o usuário enviará as mensagens para o chatbot com o objetivo de orientar o usuário. Este texto é apagado automaticamente quando o usuário inicia a escrita da mensagem. |
Multilinhas | Define se o texto escrito pelo usuário para ser enviado ao chatbot estará em uma linha única ou será quebrado em várias linhas. |
Ícone de Enviar | Ícone a ser apresentado ao lado da caixa de mensagens do usuário para a função de enviar a mensagem ao chatbot. |
Avaliação
Campo | Descrição |
---|---|
Exibir Botão de Avaliação | Define se o ícone de avaliação deve ser apresentado. |
Cor de Fundo do Botão Positivo | Cor da área do ícone que representa a satisfação do usuário. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Ícone do Botão de Negativo na Avaliação | Ícone a ser apresentado durante a avaliação com a função de receber a insatisfação do usuário. |
Ícone do Botão de Positivo na Avaliação | Ícone a ser apresentado durante a avaliação com a função de receber a satisfação do usuário. |
Texto do Botão de Avaliação | Texto a ser apresentado ao lado do ícone de avaliação. |
Ícone do Botão de Avaliação | Ícone a ser apresentado durante a avaliação com a função de receber a satisfação do usuário |
Pergunta da Avaliação | Ícone a ser apresentado com os ícones de positivo e negativo com a função de receber a avaliação do usuário. |
Cor de Fundo do Botão Negativo | Cor da área do ícone que representa a insatisfação do usuário. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL |
Rodapé da janela
Campo | Descrição |
---|---|
Cor do texto do rodapé | Cor a ser apresentada no texto do rodapé. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Texto de Reinício | Texto a ser apresentado ao usuário para a opção de reiniciar a conversa. |
Exibir Opção de Reinício | Define se deve ser fornecida ao usuário a opção de reiniciar a conversa. |
Ícone de Reinício | Ícone a ser apresentado para a opção de reiniciar a conversa. |
Cor de fundo do rodapé | Cor a ser apresentada na área do rodapé. Ao clicar, será apresentada uma janela onde será possível escolher a cor diretamente ou definir nos padrões HEXA, RGB ou HSL. |
Avançado
Campo | Descrição |
---|---|
Endereço do Serviço | A Plataforma Serprobots possibilita uma configuração personalizada de gateway que direciona o tráfego para o canal Web. No caso, endereço do gateway permitido para a comunicação com o Serprobots. |
Polling – Mensagem | Mensagem enviada quando houver interrupção da sessão por quebra de sincronismo na conexão. |
Tipografia | Fonte da letra que será exibida pela interface Web. |
Domínios permitidos | Domínios com identificação na Internet que serão permitidos pela plataforma Serprobots para a comunicação com o chatbot. |
Timeout em Segundos | Período de inatividade após o qual o sistema encerra a sessão do usuário. É comum que o chatbot encerre a sessão para liberar recursos e garantir uma melhor experiência para outros usuários. |
Mensagem de Erro Desconhecido | Mensagem exibida para o usuário quando ocorrer um erro não tratado na comunicação com a plataforma Serprobots. |
Arquivo de Configuração Externo | O endereço do arquivo de configuração externo da plataforma Seprobots são armazenados na nuvem e acessados por meio de uma URL. |
Mensagem de Ratelimit | Mensagem enviada quando o Serprobots impõe uma restrição sobre o número de solicitações que um usuário pode fazer dentro de um determinado período. |
Polling – Segundos | Período durante o qual um usuário está ativamente conectado (sincronizado) ao canal Web. |