COMO CRIAR E PERSONALIZAR O WIDGET (VISUAL) DO CHATBOT NO TOOLZZ AI?
Sobre
O widget do chatbot é uma janela de bate-papo que aparece na tela e permite os usuários interagirem diretamente com o
bot.
Como funciona
Neste artigo você vai aprender como configurar e personalizar o visual do widget. Isso engloba elementos visuais e
interativos como caixas de texto, cor do texto, botões, ícones, imagem do avatar, 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.
🚨Atenção! Cada widget pode ser usado em apenas um chatbot.
Passo a Passo
Existem dois caminhos que podem ser usados para criar widgets: através do menu lateral ou no formulário de
criação/edição do chatbot. Vamos mostrar os dois neste artigo.
❗Informação importante: o formulário para criação do widget e os campos a serem preenchidos são os mesmos nos dois
caminhos.
Ao criar um widget, ele será salvo no banco de dados da sua plataforma. Depois disso, você poderá usá-lo em qualquer
chatbot que quiser.
Acessando o formulário de criação de widget através do menu lateral
1º passo: no menu lateral, clique na opção "Widget".
Depois, clique no botão "+ Criar Widget" localizado no canto superior direito da tela.
💡Dica: se você estiver criando seu primeiro widget, verá este mesmo botão no centro da tela.
2º passo: se você já tiver criado ao menos um chatbot, selecione em qual deles deseja usar este widget que vai criar.
Se não tiver criado nenhum, essa opção não ficará visível.
Acessando o formulário de criação de widget através da criação/edição de Chatbots
1º passo: dentro do formulário de criação/edição de chatbot, após configurar a parte de "Agente" e de "Cérebro", acesse
a aba "Visual".
💡Dica: se você já criou algum widget no Toolzz AI e ele ainda não está sendo usado em nenhum chatbot, a opção
'Selecionar widget' ficará disponível nas configurações de 'Visual'. Assim, você poderá escolher um dos widgets
disponíveis, que esteja ativado, para ser usado no seu chatbot.
Criando um Widget
Daqui para frente, todos os passos de configurações e todas as telas referentes a criação de widget são os mesmos,
independente do caminho que você seguiu anteriormente.
❗Informação importante: todas as configurações realizadas e edições feitas serão mostradas, em tempo real, no modelo de
pré-visualização do chatbot no lado direito da tela.
Configurar Cabeçalho
1º passo: dê um título e um subtítulo para a interface do chatbot.
2º passo: insira a imagem que aparecerá como logo no cabeçalho.
3º passo: insira a imagem que representará o avatar do agente de IA.
4º 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.
- Cor primária: cor de fundo do cabeçalho. No nosso exemplo escolhemos a cor cinza.
- Cor secundária: cor dor texto do cabeçalho. No nosso exemplo escolhemos a cor preto.
Configurar chat
Agora, serão feitas as configurações relacionadas ao chat da interface, ou seja, às mensagens trocadas entre bot e
usuários.
5º passo: insira a imagem que será o ícone do widget.
Essa imagem aparecerá no botão inicializador do chatbot (o círculo, localizado no canto inferior direito da tela).
6º passo: digite a primeira mensagem que o agente de IA enviará quando o usuário acessar o chatbot.
7º passo: clique no círculo colorido para selecionar uma cor ou digite o código da cor no campo de texto para definir as
cores dos balões de conversa.
- Escolha as cores de fundo e do texto dos balões que exibem as respostas do agente de IA.
- Escolha as cores de fundo e do texto dos balões que exibem as respostas do usuário.
8º passo: na opção "Iniciador de conversas" clique no botão "+" para configurar opções de perguntas prontas, que o
usuário pode usar como atalhos, para iniciar a conversa com o agente de IA. Ou seja, ao invés dele digitar o que deseja
enviar, basta ele clicar em uma das opções disponíveis.
- Digite a sugestão de pergunta na caixa de texto;
- Caso queira adicionar mais opções, clique "+Novo item";
- Para excluir uma opção, basta clicar no botão de "x" referente a ela.
Selecionar voz
Se você quiser que seu agente de IA além de enviar as mensagens por escrito, também responda falando as mensagens, basta
selecionar uma voz par ele.
9º passo: clique no campo da opção "Voz" e clique em um nome para selecionar uma voz.
💡Dica: você pode testar os estilos de vozes disponíveis. Para isso, escolha uma voz e, no topo do cabeçalho da
pré-visualização do widget, clique no ícone de alto-falante para ativar o áudio. Envie uma mensagem e espere pela
resposta a IA.
Gerar Widget
Antes de gerar o widget, confira se você completou todas as tarefas obrigatórias 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ê cumpre cada uma, ela é sinalizada com o símbolo de check e a barra de porcentagem é preenchida.
10º passo: após realizar todas as configurações, clique no botão "Criar widget".
Código e link de incorporação
O código de incorporação (embed) do widget do chatbot do será gerado. Ele deve ser adicionado ao seu site para que o
chatbot apareça no canto da tela e possa e possa ser acessado pelos visitantes.
Cada aba (HTML, React, Script, Vue, Angular e Curl.) representa uma forma diferente de integrar o chatbot à sua
aplicação, de acordo com a tecnologia que você usa no seu site ou sistema.
11º passo: 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 de compartilhamento do chatbot. Ele permite que você disponibilize o seu chatbot de
forma rápida e simples, sem precisar integrá-lo diretamente em um site. Esse link pode ser enviado para os usuários ou
usado em diferentes canais para que qualquer pessoa possa interagir com o bot.
Embed
Link direto para uma página independente onde o chatbot é exibido como um widget flutuante no canto da tela.
Web
Link direto para uma página independente onde o chatbot é exibido em tela cheia.
12º passo: você pode escolher se deseja deixa o link publico (qualquer pessoa terá acesso) ou privado (apenas membros do
Toolzz AI podem acessar o chat).
❗Informação importante: a configuração vale tanto para link embed quanto web.
13º passo: navegue pelas abas "Embed" e "Web" para abrir os chatbots em uma nova aba ou copiar o link de
compartilhamento correspondente a cada opção.
14º passo: escolha o estado inicial para o chatbot no modo embed.
Nessa funcionalidade você pode definir se o chat será iniciado aberto (já mostrando a janela de conversa do chat) ou
fechado (exibindo apenas o ícone).
🚨Atenção! Lembrando que essa configuração só afeta o modo Embed.
15º passo: não se esqueça de clicar no botão "Concluir", localizado no canto superior direito da tela, para salvar todas
as configurações.
Gerenciando Widgets
Todos os widgets criados ficam expostos na página de widgets, que pode ser acessada pelo menu lateral.
16º passo: ao ser criado, um widget é ativado, automaticamente. Para desativá-lo, clique na chave de ativação no card.
Repare que ela ficará cinza.
Para ativá-lo, basta clicar na chave novamente.
17º passo: clique no ícone de três pontos para ter acesso à algumas opções.
- Chat: clique para abrir, em uma nova aba, o chatbot em modo "web";
- Embed: clique para abrir, em uma nova aba, o chatbot em modo "embed";
- Editar: clique para abrir o formulário de criação de widget e editar configurações;
- Duplicar: clique para criar um novo widget com as mesmas configurações;
💡Dica: duplique um widget quando quiser usar as mesmas configurações visuais em outro chatbot, já que cada widget só
pode ser usado em apenas um chatbot.
- Excluir: clique para apagar o widget.
18º passo: clique no ícone de estrela, no card do widget, para favoritá-lo. Assim, ele aparecerá no começo da listagem e
você poderá encontrá-lo mais facilmente.
💡Dica: você consegue identificar o status do link do embed de um widget pelo ícone em seu card. O ícone de cadeado quer
dizer que o link está configurado como privado. Já o ícone de globo com linhas verticais e horizontais cruzadas, mostra
que o ícone está configurado como público.
Pronto! Agora você já sabe criar e personalizar o widget do seu chatbot.
