O widget do chatbot é uma janela de bate-papo que aparece na tela e permite os usuários interagirem diretamente com o bot.

Neste artigo você vai aprender como configurar e personalizar o widget de acordo com seu negócio. Isso engloba elementos visuais e interativos como caixas de texto, cor do texto, botões, ícones, etc.

Depois, basta copiar o script, instalar na sua aplicação e seus clientes terão experiência prática e interativa com o chatbot.

1º passo: clique na opção "Widget" no menu lateral.

2º passo: clique no botão "+ Criar Widget".

Se for seu primeiro widget você verá um botão no meio da tela.

Se você já possuir widgets criados, o botão aparecerá no canto superior direito da tela.

3º passo: se você já tiver criado um bot, na opção "Selecionar Bot" escolha para qual bot deseja aplicar este widget.

Caso ainda não tenha um bot esta opção não aparecerá e você pode pular para o próximo passo desse tutorial.

4º passo: dê um título e um subtítulo para a interface do chatbot.

Repare que, ao lado, é possível ver, em tempo, real como ficarão o título e subtítulo no widget.

5º passo: insira a imagem que aparecerá como logo no cabeçalho.

Visão do usuário:

6º passo: insira a imagem que representará o avatar do bot.

Visão do usuário:

7º passo: defina as cores da interface do chatbot.

Você pode definir a cor de duas formas: clicar no círculo colorido e escolher uma cor ou digitar o código da cor no campo de texto.

Visão do usuário:

Agora, serão feitas as configurações relacionadas ao chat da interface, ou seja, às mensagens trocadas entre bot e usuários.

8º passo: insira a imagem que será o ícone do widget. Essa imagem aparecerá no canto inferior direito da tela, quando a interface do bot estiver minimizada e também quando a janela de conversas estiver aberta.

Visão do usuário:

9º passo: digite a primeira mensagem que o bot enviará para o usuário.

Visão do usuário:

No nosso exemplo usamos "Olá, como posso te ajudar hoje?".

10º passo: defina as cores de fundo e do texto do balão de conversa que será enviado pelo bot.

Na imagem abaixo, usada como exemplo, usamos cinza como cor de fundo e branco como cor do texto do balão de conversa.

11º passo: defina as cores de fundo e do texto do balão de conversa da resposta do usuário.

No exemplo, usamos rosa como cor de fundo e branco como cor do texto do balão de conversa.

12º passo: clique no botão "+" para configurar o iniciador de conversa.

Nesta parte você pode adicionar respostas prontas, que podem ser usadas como atalhos pelos usuários. Ou seja, ao invés dele digitar o que deseja enviar, basta ele clicar em uma das opções disponíveis.

Visão do usuário:

13º passo: se você quiser que sua IA tenha uma voz e, além de enviar as mensagens por escrito, também fale as mensagens, selecione uma voz.

Você pode testar os estilos de vozes disponíveis. Para isso, escolha uma voz. No topo do cabeçalho da prévia de visualização do widget, clique no ícone de alto-falante para ativar o áudio. Envie uma mensagem e espere pela resposta a IA.

14º passo: confira se você completou todas as tarefas obrigatórias para a criação do widget no contador de tarefas.

São três tarefas: "Adicionar um título", "Adicionar um sub-título" e "Adicionar primeira mensagem". A medida que você vai cumprindo cada uma, ela é sinalizada com o símbolo de check.

15º passo: após realizar todas as configurações, clique no botão "Criar widget".

16º passo: agora você tem o script do seu chatbot. Escolha um dos formatos e depois clique no botão "Copiar". Use a informação para instalar o bot no seu site ou aplicação.

Você também terá acesso ao link púbico de compartilhamento, tanto o "Embed" quanto o "Web" (URL personalizada).

17º passo: não se esqueça de clicar no botão "Concluir" para salvar todas as configurações.

18º passo: os widgets criados ficarão expostos em formato de cards. Clique no ícone de três pontos para ter acesso às opções "Editar", "Duplicar" e "Excluir".

Pronto! Agora você já sabe criar e personalizar o widget do seu chat bot.