VISUAL

COMO PERSONALIZAR O VISUAL DO BOT?

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. 1. 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. 2. 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 3. 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.