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ê visualiza, em tempo real, as customizações realizadas.
Templates
4º passo: no menu de configurações, clique em "Templates".
5º passo: 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". Você pode usar o mesmo modelo em diferentes bots.
6º passo: dê um nome ao modelo e clique em "Salvar".
7º passo: na aba "Galeria", você encontrará modelos prontos para se inspirar. Se desejar, selecione um dos modelos disponíveis.
Global
8º passo: no menu de configurações, clique em "Global".
9º passo: para exibir o logo do Toolzz Bots no final do bot, habilite o botão "Mostrar marca do Toolzz Bots".
10º 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.
Visão do usuário
11º passo: 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. Selecione "Absolut" para posicionar a barra de progresso na parte superior do contêiner de bate-papo.
12º 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.
13º passo: ainda na seção "Fonte", você pode personalizá-la 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.
14º 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.
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.
Nenhum: selecionando essa opção, o plano de fundo ficará branco, sem nenhuma personalização.
Chat
15º 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.
16º passo: 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 do passo anterior.
17º passo: personalize o texto, o plano de fundo e a borda de cada elemento do chat.
Customizar CSS
18º passo: clique em "Customizar CSS" e no campo selecionado você pode personalizar ainda mais adicionando qualquer CSS personalizado que desejar.
Pronto! Agora você já sabe como personalizar o visual do seu bot.