Pular para o conteúdo principal

Customizar Aparência

Crie uma experiência única para seus clientes personalizando completamente a aparência do seu chatbot! Configure cores, estilos e mensagens que reflitam a identidade da sua marca e se adaptem perfeitamente ao seu site.

Contexto Atual

A aparência está sendo editada no contexto: [CONTEXTO_ATUAL]. Cada contexto pode ter sua própria personalização visual.

Layout da Página​

A página de customização é dividida em duas seções principais:

Seção Esquerda: Configurações​

Painel com todas as opções de personalização do chatbot

Seção Direita: Preview​

Área de pré-visualização em tempo real das mudanças

Modo Avançado​

Alternar Modo Avançado​

❌ Desabilitado (padrão): Opções básicas de customização.
☑️ Habilitado: Acesso a configurações avançadas e detalhadas

Quando usar o Modo Avançado

Ative o modo avançado quando precisar de controle total sobre cores, espaçamentos e elementos específicos da interface.

Aparência do Chatbot​

Informações Básicas​

Nome do Bot​

  • Personalização: Define como o chatbot se apresenta
  • Exemplo: "Assistente Virtual", "Maya - Atendimento", "Bot da Loja"
  • Impacto: Aparece no cabeçalho do chat

Nome da Empresa​

  • Personalização: Identifica sua empresa no chat
  • Exemplo: "Empresa XYZ", "Loja Virtual", "Consultoria ABC"
  • Impacto: Aparece junto ao nome do bot

Avatar da IA​

  • Formato: JPG ou PNG
  • Tamanho máximo: 5MB
  • Dimensões recomendadas: 1024x1024 pixels
  • Uso: Representa visualmente seu chatbot

Tipo e Posicionamento​

Tipo de Chat​

  • Bolha (recomendado): Ícone circular que abre o chat
  • Caixa: Widget sempre visível na página

Tamanho da Bolha​

  • Pequeno: Discreta, menos chamativa
  • Médio (padrão): Equilíbrio entre visibilidade e discrição
  • Grande: Mais visível, chama mais atenção

Posição do Chat​

  • Superior esquerdo: Canto superior esquerdo da tela
  • Superior direito: Canto superior direito da tela
  • Inferior esquerdo: Canto inferior esquerdo da tela
  • Inferior direito (padrão): Posição mais comum e intuitiva

Modos de Exibição​

Configure quais elementos visuais serão exibidos:

  • ☑️ Mostrar avatar do usuário: Exibe ícone do usuário nas mensagens
  • ☑️ Mostrar avatar da IA: Exibe avatar do bot nas respostas
  • ☑️ Mostrar animação da IA: Efeito visual durante processamento
  • ☑️ Mostrar bolha com animação da IA: Animação na bolha principal

Configurações Avançadas (Modo Avançado)​

Margem​

  • Controle: Slider de ajuste
  • Função: Define distância das bordas da tela
  • Valores: 0px a 50px

Espaçamento​

  • Controle: Slider de ajuste
  • Função: Espaçamento interno dos elementos
  • Valores: 0px a 30px

Raio da Borda​

  • Controle: Slider de ajuste
  • Função: Arredondamento das bordas
  • Valores: 0px (quadrado) a 30px (muito arredondado)

Configuração de Cores​

Cores Básicas​

Cor Primária​

  • Padrão: #8E6EF4 (roxo)
  • Uso: Botões principais, destaques, cabeçalho
  • Recomendação: Use a cor principal da sua marca

Cor da Fonte​

  • Padrão: #FFFFFF (branco)
  • Uso: Texto em botões e elementos destacados
  • Dica: Garanta contraste adequado com a cor primária

Cor do Fundo do Modal​

  • Padrão: #1B1C23 (cinza escuro)
  • Uso: Fundo da janela de chat
  • Importante: Escolha cor que não canse a vista

Cores Avançadas (Modo Avançado)​

Quando o modo avançado está ativo, você tem acesso a:

Interface e Botões​

  • Cor do botão de abertura
  • Cor do erro: Para mensagens de erro
  • Cor do placeholder: Texto de exemplo nos campos
  • Cor da fonte do prompt: Texto da área de digitação
  • Cor do botão do prompt: Botão de enviar mensagem

Animações e Efeitos​

  • Cor do fundo da animação da IA
  • Cor do ícone da animação da IA
  • Cor do backdrop do modal: Fundo escuro atrás do chat

Elementos da Interface​

  • Cor do texto do botão de fechar
  • Cor do divisor: Linhas separadoras
  • Cor do link: Links clicáveis nas mensagens
  • Cor do ícone de carregamento: Indicador de espera enquanto o chatbot responde

Mensagens​

  • Cor do fundo da mensagem do usuário
  • Cor do fundo da mensagem da IA
  • Cor do fundo do prompt dentro do modal

Avatares​

  • Cor do fundo dos avatares
  • Cor da borda dos avatares

Controles de Ação​

Botões Principais​

SALVAR​

  • Função: Aplica todas as alterações
  • Importante: Sempre salve após fazer mudanças

DESFAZER ALTERAÇÕES​

  • Função: Reverte para última versão salva
  • Uso: Quando quiser recomeçar a customização

Preview em Tempo Real​

Funcionalidades do Preview​

Visualização Instantânea​

  • ✅ Mudanças imediatas: Veja alterações em tempo real
  • ✅ Teste de cores: Verifique contrastes e harmonia
  • ✅ Simulação real: Comportamento idêntico ao site
  • ✅ Teste de mensagens: Veja como ficam as configurações
Dica de UX

Um chatbot bem personalizado pode aumentar significativamente o engajamento dos usuários. Invista tempo na personalização visual e comunicativa!

Importante

Sempre teste suas configurações no preview antes de salvar. Pequenos ajustes podem fazer grande diferença na experiência do usuário.