Sobre

O visual do bot é pensado para refletir a identidade da sua empresa em cada detalhe da experiência.

Assim como em interfaces modernas de navegação na web, você pode construir fluxos que não apenas funcionam bem, mas também seguem o padrão visual da sua marca, criando uma experiência consistente e profissional para o usuário.

Como funciona

A personalização é altamente flexível e modular, permitindo ajustar elementos como cores, tipografia, espaçamento, estrutura da interface e navegação por abas de acordo com a necessidade do seu projeto.

Além disso, você pode escolher entre diferentes experiências de navegação, adaptando o formato do bot para cada contexto de uso, seja em uma abordagem mais direta ou em interfaces mais completas e interativas.

O resultado é um bot que deixa de ser apenas funcional e passa a ser uma extensão real da sua marca.

Passo a passo

1º passo: dentro do fluxo do bot, acesse a aba "Visual".

2º passo: em "Customize o tema", você encontrará um menu de configurações com várias opções para personalizar a aparência do seu bot.

3º passo: ao lado do menu de configurações, você acompanha em tempo real todas as customizações realizadas. Também é possível alternar entre os formatos (Web, Standard, Pop-up e Bubble) para visualizar como o bot será exibido em cada versão.

Templates

4º passo: no menu de configurações, clique em "Templates".

Na aba "Meus templates" você encontrará todos os seus modelos salvos. Para salvar o tema atual e criar um novo modelo, clique em "Salvar tema atual". Dê um nome ao modelo e clique em "Salvar". Você pode usar o mesmo modelo em diferentes bots.

🚨Atenção!
O botão de Salvar tema atual só fica disponível conforme são realizados ajustes na seção Chat.

5º passo: na aba "Galeria", você encontrará modelos prontos para se inspirar. Se desejar, selecione um dos modelos disponíveis.

Global

6º passo: no menu de configurações, clique em "Global".

7º passo: para exibir o logo do Toolzz Bots no final do bot, habilite o botão "Mostrar marca do Toolzz Bots".

8º passo: se desejar ter uma barra de progresso na parte superior, indicando o progresso do usuário no bot, ative o botão "Ativar barra de progresso". Essa barra irá aumentar à medida que o usuário avançar nos caminhos.

Ao ativar a barra de progresso, você pode personalizá-la de acordo com suas preferências.

Posição: escolha onde a barra de progresso será exibida no bot. Selecione entre "Topo" (na parte superior do bot) ou "Fundo" (na parte inferior do bot).
Cor: clique no seletor de cores para definir a cor da barra à medida que o usuário avançar nos caminhos do bot.
Espessura: defina a espessura da barra. Quanto maior o número, mais grossa será a barra.
Posição incorporado: selecione "Fixed" para manter a barra de progresso sempre no topo da janela, mesmo quando o bot estiver incorporado ou selecione "Absolut" para posicionar a barra de progresso na parte superior do contêiner de bate-papo.

9º passo: em "Fonte", selecione "Google". Em seguida, no campo que será exibido, escreva o nome da fonte que deseja utilizar para os textos do bot.

Você pode personalizar ainda mais selecionando a opção "Custom". Em seguida, nos campos que serão exibidos, defina a família da fonte desejada e preencha o outro campo com as informações necessárias para inserir fontes personalizadas de outros sites.

10º passo: em "Plano de fundo", você tem três opções de personalização disponíveis.

Cor: ao selecionar essa opção, clique no seletor de cores e escolha a cor do plano de fundo do seu bot ou digite o código da cor.
Imagem: essa opção permite inserir um emoji, selecionar uma imagem no Unsplash, inserir link ou fazer o upload de uma imagem para ser o plano de fundo do seu bot. Recomendação: 1920x1080 pixels
Nenhum: selecionando essa opção, o plano de fundo ficará branco, sem nenhuma personalização.

Chat

11º passo: clique na categoria "Chat" e ative o botão "Avatar do bot". Em seguida, clique na foto de perfil para inserir a imagem do avatar do bot. Você pode inserir a imagem através de um link, upload, emoji, GIF, imagens ou ícones. Recomendação de tamanho da imagem: 128x128, PNG.

Se quiser que apareça uma imagem de avatar para as respostas dos usuários, habilite o botão "Avatar do usuário" e insira a imagem realizando o mesmo processo.

12º passo: personalize o texto, o plano de fundo e a borda de cada elemento do chat.

Customizar CSS

13º passo: clique em "Customizar CSS" e no campo selecionado você pode personalizar ainda mais adicionando qualquer CSS personalizado que desejar.

Experiência de Navegação

14º passo: expanda a seção "Experiência de Navegação" e depois clique em "Ativar navegação com abas" para que ao invés de abrir diretamente o bot na conversa, o widget pode iniciar em uma interface mais completa e organizada em diferentes áreas.

15º passo: ative, de forma modular, as abas que deseja exibir no seu widget, criando uma experiência de navegação no formato de hub:

Mensagens: acesso ao histórico de interações e mensagens já enviadas pelo bot, permitindo que o usuário revisite conteúdos a qualquer momento;
Início: espaço personalizável para destacar conteúdos com imagens, links e direcionamentos estratégicos;
Ajuda: integração com a central de ajuda do Toolzz Chat, permitindo acesso direto aos artigos;

Para definir em qual aba o bot será iniciado, clique no ícone de estrela correspondente. Você também pode reorganizar a ordem de exibição das abas clicando, segurando e arrastando as seis bolinhas localizadas no canto esquerdo de cada card.

🚨Atenção!

A aba "Mensagens" é obrigatória e não pode ser desativada.

16º passo: ative a opção "Logo" para adicionar uma imagem na aba "Início". Você pode inserir a imagem por meio de um link ou fazendo upload do arquivo.

Em seguida, configure a mensagem inicial de boas-vindas que será exibida para o usuário ao acessar essa aba.

17º passo: ative a opção "Imagens de destaque" para adicionar até cinco imagens clicáveis, com redirecionamento para links externos.

Para incluir uma imagem, clique em "Adicionar imagem" e escolha se deseja inseri-la por link ou upload. Em seguida, no campo "URL ou link ao clicar", insira o endereço para onde o usuário será direcionado ao clicar na imagem.

Se quiser remover uma imagem, basta clicar no ícone de lixeira.

💡Dica:

Se a sua central de ajuda estiver conectada ao Toolzz Chat, você pode colar o link de um artigo nesse campo. Assim, ao clicar na imagem, o usuário será direcionado diretamente para a aba "Ajuda", com o artigo já aberto dentro do widget. Para saber como fazer essa conexão, confira o passo 18.

18º passo: clique em "Conectar" para fazer a conexão com a conta do Toolzz Chat.

19º passo: você será direcionado para a página de login do Toolzz Chat. Insira seus dados de acesso e clique em "Entrar".

Em seguida, clique em "Permitir compartilhar" para autorizar o envio de informações do Toolzz Chat para o Toolzz Bots.

20º passo: após realizar a conexão com o Toolzz Chat, o campo passará a exibir o status "Conectado".

Em "Central de ajuda", selecione, marcando o checkbox, quais centrais você deseja exibir na aba "Ajuda". Para remover uma opção, basta clicar novamente no checkbox até que ele fique cinza.

21º passo: com a central de ajuda conectada, os usuários poderão acessar os artigos diretamente pelo widget do bot, sem precisar sair para um link externo.

Na aba "Ajuda", você encontrará:

Lista de centrais de ajuda: exibe todas as centrais selecionadas no passo anterior.
Campo de busca: permite encontrar rapidamente uma central de ajuda.

Ao clicar em uma central de ajuda:

Será exibida a lista de artigos disponíveis.
Você pode usar o campo de busca para encontrar um artigo pelo título.
Basta clicar no artigo desejado para visualizá-lo.

Dentro do artigo:

Clique no ícone de expandir (duas setas) para visualizar em tela maior.
Use o ícone de voltar (seta para a esquerda) para retornar à tela anterior. Esse botão está disponível em todas as etapas da navegação.

22º passo: escolha o tema de navegação. Você pode optar pelo modo claro, escuro ou personalizar as cores.

Para personalizar, clique no seletor de cores do item desejado e escolha uma cor ou insira o código correspondente.

Experiência do usuário completa com todas as abas configuradas:

Pronto! Agora você já sabe como personalizar o visual do seu bot.

COMO PERSONALIZAR O VISUAL DO BOT?