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: dê um título e um subtítulo para a interface do chatbot. Insira uma URL de compartilhamento personalizada para seu chatbot.

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

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

Visão do usuário:

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

Visão do usuário:

6º 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.

7º 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:

8º 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?".

9º 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.

10º 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.

11º 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:

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

13º passo: agora você tem o script do seu chatbot. Clique no botão "Copiar" e 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).

14º passo: não se esqueça de clicar no botão "Salvar Widget" para salvar todas as configurações de criação do widget.

15º 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.