Configurando o Canal Web (padrão)

Durante a edição das configurações de um chatbot no Gerenciador do Serprobots, é possível configurar os canais de comunicação que farão a interface com usuário clicando no passo 3 - Canais de Comunicação, ou no botão respectivo na barra de menu do canto esquerdo.

Hoje são oferecidos os canais:

Webchat (padrão): oferece uma janela de chat reponsiva que pode tanto ser acionada através de um trigger flutuante incluído em website, ou mesmo acessada diretamente através de um iframe ou webview em um aplicativo móvel.
Mobile com Flutter: oferece um plugin escrito em Flutter para seja possível abrir uma janela do chatbot em uma aplicação escrita nesta tecnologia.
Whatsapp: permite integração com alguma Whatsapp Business API Client existente.
Twitter: permite integração com o recurso de Mensagens Diretas do Twitter, possibilitando que um chatbot responda mensagens diretas de uma conta existente.
Facebook Messenger: permite integração com o Facebook Messenger de uma página.

Vamos falar agora sobre a configuração do canal Webchat/Mobile (padrão).

Na tela de Canais de Comunicação, clicando no botão do canal Webchat (padrão), será possivel personalizar a caixa de conversação através de parâmetros, alterando por exemplo títulos, textos, cores e imagens.

Dica

Assim como as configurações dos componentes, as configurações dos canais de comunicação são armazenadas em um fluxo. Dessa forma é possível testar as alterações em fluxos alternativos, preservando a configuração anterior que já está em funcionamento.

Mobile com Flutter

O Serprobots oferece um plugin escrito em Flutter para que facilitar a integração de chatbots com esta plataforma de desenvolvimento para dispositivos móveis. No momento, damos suporte apenas ao Flutter, portanto, não há ainda componentes para as plataformas nativas.

Todas as configurações abaixo, específicas para o canal de comunicação Webchat, também valem para o plugin do Flutter. Entretanto, o plugin do Flutter não utiliza todas essas configurações, apenas um pequeno subconjunto, listado logo abaixo:

Endereço do Serviço
Mensagem Inicial
Mensagem de Timeout
PlaceHolder
Título do Cabeçalho
Exibir a Data da Mensagem
Formato da Data
Mensagem de Aguarde/Digitando
Nome do Bot
Avatar do Bot
Avatar do Usuário
Imagem de Aguarde/Digitando
Timeout em Segundos
Exibir "Digitando"
Exibir o Avatar
Pergunta da Avaliação

Estas configurações serão vistas nos próximos tópicos. Caso tenha interesse em desenvolver uma aplicação em Flutter e acoplar nosso plugin que seu chatbot seja acessível através desta aplicação, acesse a documentação deste plugin clicando aqui.

Endereço do Serviço

Por padrão, a UI do Serprobots envia todas as mensagens para o Gateway do Serprobots. Este Gateway é o responsável por processar a requisição do usuário e retornar uma resposta para a sua pergunta. Entretanto, há situações nas quais seja necessário usar um entreposto para processar as mensagens do usuário antes de estas mensagens chegarem ao Gateway do Serprobots. A opção Endereço do Serviço para que você informe qual o endereço do seu Entreposto.

Dica

Para mais informações sobre como funciona e como configurar seu entreposto, acesse a documentação sobre Entreposto.

Mensagem Inicial

Sabe aquela mensagem que é exibida para o usuário assim que a janela do chatbot é aberta? De onde vem essa mensagem? Vem do Gateway do Serprobots, como qualquer ourta mensagem. Mas, então, como o Gateway sabe que deve enviar aquela mensagem para o Gateway?

A UI informa ao Gateway que está pronta e que deseja exibir uma mensagem de boas vindas, ou onboarding, para o usuário. Para informar isto ao gateway, a UI envia uma mensagem especial, que será interpretada por um dos componentes do Serprobots (Boas Vindas). O conteúdo desta mensagem deve ser definido na opção Mensagem Inicial e vem com o padrão INITIALMESSAGE1, que é tratado por padrão pelo componente Boas Vindas.

Personalização

É possível personalizar praticamente tudo na UI responsiva do Serprobots, incluindo as cores do cabeçalho, rodapé, textos e etc.

Fonte/Tipografia

A primeira personalização que é possível de ser realizada na UI do Serprobots é a definição da fonte que será usada em toda a UI. Basicamente, o Serprobots usa apenas um subconjunto das fontes disponibilizadas pelo Google Fonts:

Noto (noto-typography)
Nunito (nunito-typography)
Open Sans (opensans-typography)
Oxygen (oxygen-typography)
Quicksand (quicksand-typography)
Roboto (roboto-typography)
Sen (sen-typography)
Titillium (titillium-typography)
Ubuntu (ubuntu-typography)

Para informar ao Serprobots qual fonte deve ser utilizada, existe a opção Tipografia. Neste campo, informe o nome da fonte seguido de -typography. Por exemplo, ubuntu-typography.

Personalização do Cabeçalho

A opção Cor de fundo do cabeçalho permite alterar a cor do fundo(background) que será usada para o cabeçalho do chatbot. Trata-se da parte superior, onde encontra-se o título e o avatar do chatbot, conforme a imagem abaixo, na qual temos a cor azul sendo utilizada.

A opção Cor do texto do cabeçalho permite alterar a cor do texto que será usada para o cabeçalho do chatbot, enquanto a opção Tamanho da Fonte do Cabeçalho permite definir um tamanho para a fonte do título. Quanto ao tamanho da fonte, é possível utilizar qualquer valor HTML válido, por exemplo: 16px, 16pt, small, large, medium.

O avatar também é passível de alteração, para tal, use a opção Avatar do Cabeçalho e selecione uma imagem do seu computador. Esta imagem será hospedada no Serprobots, como um campo codificado em Base64.

Caso deseje alterar o título que é exibido no cabeçalho, modifique o atributo Título do Cabeçalho mas fique atento, pois um título muito extenso pode forçar uma quebra de linha e o cabeçalho não comporta isto.

Podemos também alterar os ícones de fechar e minimizar, que estão localizados no canto direito do cabeçalho. Para tal, use as opções Ícone Fechar e Ícone Minimizar. Observe que estes campos aceitam um valor de texto, no qual deve ser informado o nome de um ícone do Google Fonts. São aceitos apenas nomes de ícones do Google Fonts, não sendo possível utilizar ícones próprios.

Entretanto, caso seja necessário esconder os botões de fechar e minimizar, utilize as opções Esconder Botão Fechar e Esconder Botão Minimizar.

Dica

O Serprobots permite o uso de imagens no formato JPG, PNG, GIF e SVG. Sugerimos o uso do formato SVG ou PNG. O formato SVG permite, inclusive, que sejam usadas animações.

Personalização do Rodapé

Assim como o cabeçalho, também é possível personalizar quase tudo no rodapé do chatbot. Começamos com a Cor de fundo do rodapé, que define a cor do background, conforme pode ser visto na imagem abaixo, onde temos a cor azul. Assim como a cor do background, também podemos definir a Cor do texto do rodapé.

Personalizando o Campo de Texto

O campo de texto, no qual o usuário digita sua mensagem, também pode ser bastante personalizado, conforme veremos nas próximas seções.

Campo de Múltiplas Linhas

Primeiro, através da opção Multilinhas é possível definir se o input de entrada permite múltiplas linhas ou se é um campo de texto de uma linha só. Na imagem abaixo, temos um exemplo de um campo de entrada com suporte a mais de uma linha de texto.

Já na imagem abaixo, temos um exemplo de como será exibido um campo sem suporte a múltiplas linhas.

Limpando a Mensagem do Usuário

Em seguida, é possível usar o campo Limpar entrada de texto para informar ao Serprobots se o campo de entrada de texto deve ter seu conteúdo totalmente apagado logo após o envio da mensagem do usuário.

Desabilitando o campo de entrada

Embora seja o método mais comum e o mais indicado na grande maioria dos casos, o seu chatbot pode também impedir que o usuário digite as perguntas livremente. Ao invés disto, o usuário poderá interagir apenas através de perguntas pré-definidas. Neste caso, para que seu chatbot não dê a ilusão ao usuário que ele pode digitar qualquer texto, é interessante desabilitar a entrada de perguntas pelo usuário. Para tal, utilize a opção Desabilitar entrada de mensagens e a marque como True.

Ocultando o campo de entrada

Entretanto, caso seja necessário ocultar totalmente o campo de entrada de mensagens, conforme a imagem abaixo, use a opção Exibir entrada de mensagens e a marque como False.

Enviar Mensagem com Enter?

Também é possível definir se a UI deve enviar ou não a mensagem do usuário assim que ele aperta a tecla ENTER. Para tal, use a opção Usar "Enter" para enviar mensagem.

Ícone do Botão de Enviar

Além de ser possível enviar a mensagem do usuário com um Enter, também é possível enviar a mesma mensagem apenas clicando no ícone de Enviar, que fica logo ao lado da caixa de entrada de mensagens. Note que este ícone também é passível de personalização através da opção Ícone de Enviar. Note que o ícone deve ser escolhido do Google Fonts, igual a todos os ícones usados na UI.

Limitando o Tamanho da Mensagem

Caso seja necessário limitar a quantidade de caracteres que uma mensagem do usuário pode possuir, utilize a opção Tamanho máximo da mensagem e informe um tempo em segundos.

Placeholder

O Placeholder é a mensagem que aparece dentro do campo de entrada mas que desaparece assim que o usuário digita sua mensagem. Esta mensagem é personalizável através da opção Placeholder da Entrada de Texto.

Personalizando a Avaliação

Após o usuário digitar uma mensagem, será disponibilizada uma opção que permite ao usuário avaliar o atendimento realizado até o momento. Inicialmente, será exibido um botão a mais, ao lado do botão de reiniciar a conversa. Ao clicar neste botão, será exibida uma mensagem, em conjunto com dois botões, no local onde se encontra a caixa de entrada, conforme pode ser visto na imagem abaixo.

Para personalizar o texto que é exibido no botão que inicia a avaliação, use a opção Texto do Botão de Avaliação. Sugerimos não usar textos grandes, pois isto afetará o layout do chatbot. Também é possível mudar o ícone deste botão através da opção Ícone do Botão de Avaliação. Note que o ícone deve ser escolhido do Google Fonts, igual a todos os ícones usados na UI.

Em seguida, podemos personalizar o texto que é exibido para o usuário solicitando sua avaliação, conforme a imagem acima, na qual temos o texto "Como você avalia nosso atendimento?". Para modificar este texto, use a opção Pergunta da Avaliação. Evite usar frases grandes, pois isto vai poluir o layout da UI.

Caso deseje alterar os ícones dos botões que enviam uma avaliação positiva ou negativa, use as opções Ícone do Botão de Negativo na Avaliação e Ícone do Botão de Positivo na Avaliação. Note que o ícone deve ser escolhido do Google Fonts, igual a todos os ícones usados na UI. Assim como é possível personalizar os ícones, também é possível personalizar a cor de fundo do botão desses botões. Para tal, use as opções Cor de Fundo do Botão Negativo e Cor de Fundo do Botão Positivo.

Por último, é possível definir que o botão que inicia a avaliação nunca seja exibido, usando, para isto, a opção Exibir Botão de Avaliação.

Personalização do Trigger

O trigger é o botão, exibido no canto inferior direito da tela, que abre a janela do chatbot, conforme podemos ver na imagem abaixo.

A imagem deste botão é personalizável através da opção Imagem do Trigger. Note que esta imagem será redimensionada para caber no círculo, portanto, tenha em mente que o tamanho da imagem importa e não deve ser nem muito grande e muito menos muito pequena.

Finalizando, também é possível iniciar a tela com a janela do chatbot já aberta e pronta para receber a mensagem do usuário. Para tal, use a opção Iniciar aberto.

Dica

O Serprobots permite o uso de imagens no formato JPG, PNG, GIF e SVG. Sugerimos o uso do formato SVG ou PNG. O formato SVG permite, inclusive, que sejam usadas animações.

Timeout da Conversação

Nenhuma conversação no Serprobots dura para sempre. Todas conversas possuem um timeout, que define a quantidade de segundos que uma conversação deve durar. A duração das conversações no seu chatbot pode ser definida através da opção Timeout em Segundos.

Quando este timeout é atingido, a UI enviará automaticamente uma mensagem para o Gateway, informando que a conversação deve ser finalizada e aguarda uma mensagem de "adeus" que deve ser exibida para o usuário. O conteúdo desta mensagem é definido na opção Mensagem de Timeout. Na maioria dos casos, esta mensagem tem o conteúdo TIMEOUTMESSAGE1 e é capturada pelo componente Mensagem Inicial.

Rate Limit e Erro Desconhecido

O Serprobots possui um mecanismo de proteção contra robôs e pessoas mal-intencionadas. Quando o Gateway do Serprobots detecta um número excessivo de mensagens, ele descarta a mensagem e retorna um erro de Rate Limit. Quando isto acontece, é importante avisar ao usuário que o seu chatbot está incapacitado de responder à sua pergunta naquele momento. Para personalizar a mensagem de Rate Limit, use a opção Mensagem de Ratelimit.

Outra situação que pode ocorrer, excepcionalmente, é uma indisponibilidade do Serprobots. Quando isto ocorrer, a UI não conseguirá contatar o Gateway e exibirá a mensagem que for configurada na opção Mensagem de Erro Desconhecido.

Polling

Caso seu chatbot necessite enviar mensagens em background e periódicas para o Gateway, você deve usar as opções Polling - Mensagem e Polling - Segundos. A primeira define qual a mensagem que será enviada periodicamente para o Gateway, enquanto a segunda o períodicidade, em segundos, que a mensagem de polling será enviada.

O Polling é útil para verificar se alguma tarefa foi concluída. Por exemplo, imagine um cenário onde o usuário pergunta alguma informação que pode demorar alguns segundos para ter uma resposta. Ao invés de "travar" o usuário aguardando esta resposta, o chatbot pode continuar respondendo às perguntas seguintes, enquanto o processamento é executado. Assim que o processamento tiver sido concluído, a próxima mensagem de polling pode obter o resultado para a pergunta do usuário.

Note que este tipo de cenário requer o uso de Webhooks, que farão um processamento da requisição do usuário.

Domínios Permitidos

Lembra como é fácil incluir um chatbot, publicado no Serprobots, em uma página HTML qualquer? Basta incluir um script em Javascript usando a tag script. Bastante simples, certo? Entretanto, note que isto traz uma consequência: qualquer pessoa pode copiar esse script e incluir o chatbot em outra página qualquer. Isto significa que o chatbot do seu cliente pode estar sendo usado em uma página que você sequer sabe que existe.

Embora isto não seja necessariamente um problema, há clientes que não desejam que isso aconteça. Estes clientes querem que o seu chatbot seja acessível somente através de sua própria página. Tem como fazer isso? Sim, o Serprobots permite restringir quais sites podem referenciar seu chatbot. Para isto, use a opção Domínios permitidos e informe quais domínios tem permissão.

Uma observação importante: não utilize wildcards. Basta informar o domínio e todos os subdomínios e caminhos serão contemplados automaticamente. Por exemplo, basta informar serpro.gov.br que qualquer subdomínio, como estaleiro.serpro.gov.br, terá permissão para usar o chatbot.

Redirecionamento ao Fechar

É possível mudar o comportamento do botão fechar da janela do UI. Seu comportamento padrão é fechar a janela, entretanto, caso você queira que este clique no botão leve o usuário para uma outra página, use a opção Redirecionar ao Fechar e informe o domínio para o qual o usuário será redirecionado.

Reiniciar

A UI do Serprobots exibe, por padrão, um botão que permite reiniciar a conversação, entretanto, caso isto não seja necessário em seu chatbot, é possível esconder este botão através da opção Exibir Opção de Reinício. Também é possível personalizar tanto o texto, como o ícone deste botão.

Para o primeiro caso, o texto pode ser modificado através da opção Texto de Reinício. Para o segundo caso, use a opção Ícone de Reinício, lembrando que os ícones aceitos são aqueles disponibilizados no Google Fonts.

Personalizando as Mensagens

A área da UI na qual aparecem as mensagens tanto do usuário como do bot também é passível de personalização, assim como quase toda a UI. Veremos, nesta seção, quais configurações estão disponíveis.

Avatar

A primeira personalização disponível diz respeito ao avatar que aparece ao lado de cada mensagem, conforme podemos ver na imagem abaixo.

Inicialmente, podemos definir se esses avatares serão exibidos ou não através da opção Exibir o Avatar. Em seguida, podemos definir qual imagem servirá como avatar tanto para as mensagens do usuário, como para as mensagens do bot. Para alterarmos o avatar do usuário, informe a imagem na opção Avatar do Usuário, enquanto que para alterar o avatar do bot, devemos usar a opção Avatar do Bot.

Dica

O Serprobots permite o uso de imagens no formato JPG, PNG, GIF e SVG. Sugerimos o uso do formato SVG ou PNG. O formato SVG permite, inclusive, que sejam usadas animações.

Cores das Caixas de Mensagens

As caixas onde aparecem tanto as mensagens dos usuários, como as que aparecem as mensagens do bot e mensagens de erro, são também personalizáveis. Para modificar tanto a cor de fundo, como a cor do texto, da caixa de mensagem do bot, basta editar as opções Cor de fundo da caixa de mensagem do bot e Cor da fonte da caixa de mensagem do bot, respectivamente.

Já as caixas de texto que contém a mensagem do usuário são personalizáveis através das opções Cor da fonte da caixa de mensagem do usuário e Cor de fundo da caixa de mensagem do usuário. Por último, é possível modificar a caixa de mensagem de um erro através das opções Cor de fundo da mensagem de erro e Cor do texto da mensagem de erro.

Tamanho da Fonte das Mensagens

Caso haja necessidade, também é possível definir qual o tamanho da fonte das mensagens. Note que esta configuração afeta todas as mensagens, independente se é uma mensagem do bot, do usuário ou uma mensagem de erro. Para realizar esta personalização, utilize a opção Tamanho da Fonte da Mensagem.

Bot está Digitando!

É uma boa prática sempre informar ao usuário que a mensagem que ele enviou está em processamento e que em breve ele terá uma resposta. A UI do Serprobots permite isto ao exibir uma mensagem padrão Aguarde... nestas situações. Contudo, é possível personalizar esta mensagem, assim como usar uma imagem para tal.

Primeiro, caso você não queira exibir esta mensagem de aguarde, altere a opção Exibir "Digitando" para Falso. Em segundo lugar, caso queira modificar a mensagem que é exibida, altere o conteúdo da opção Mensagem de Aguarde/Digitando. Por último, também podemos exibir uma imagem, que pode ser definida através da opção Imagem de Aguarde/Digitando.

Data da Mensagem

Outra possibilidade de personalização diz respeito à data que é exibida abaixo da caixa de cada mensagem. Primeiro, é possível informar se esta data deve ser exibida, ou não, através da opção Exibir a Data da Mensagem. Em seguida, também é possível definir o formato desta data, através da opção Formato da Data. Note que esta formatação segue o padrão de formatação de datas em Java. Finalizando, temos a possibilidade de informar o tamanho da fonte da data através da opção Tamanho da Fonte da Data.