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

Customizar AparênciaCustomizar Aparência

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

Personalidade do Chatbot​

Perfil Comunicativo​

Configure como seu chatbot se comunica com os usuários:

Papel​

Escolha a função principal do seu chatbot:

  • Vendedor (padrão): Foco em conversão e vendas
  • Representante: Atendimento geral e suporte
  • Professor: Educativo e explicativo

Personalidade​

Defina o tom de comunicação:

  • Confiante: Seguro e assertivo
  • Descontraído: Casual e amigável
  • Informal: Linguagem próxima e pessoal
  • Formal: Linguagem corporativa e profissional
  • Dedicado: Atencioso e comprometido
  • Nerd: Técnico e detalhista
  • Apaixonado: Entusiasmado e energético
  • Irreverente: Divertido e despojado

Instruções Restritivas​

Configure limitações importantes para o comportamento do chatbot:

Exemplos de Restrições:​

  1. "Não mencione preços de serviços ou faça orçamentos, sempre indique o contato com um especialista."
  2. "Não faça julgamentos ou comparações com produtos concorrentes. Apenas enfatize as qualidades de nossos produtos."
  3. "Não responda com códigos de qualquer linguagem de programação."

Como Criar Boas Restrições:​

  • ✅ Seja específico sobre o que não deve ser feito
  • ✅ Inclua alternativas quando possível
  • ✅ Use linguagem clara e direta
  • ✅ Teste as restrições com perguntas reais

Informações e Mensagens​

Mensagens do Sistema​

Mensagem de Boas-vindas​

  • Padrão: "Olá, como posso ajudar?"
  • Personalização: Primeira impressão do usuário

Placeholder​

  • Padrão: "Fale-me o que procura e vou lhe ajudar"
  • Função: Texto de exemplo no campo de digitação

Mensagens Avançadas (Modo Avançado)​

  • Mensagem de fechar chat: "Recolher conversa"
  • Mensagem de erro: "Desculpe, não entendi o que você quis dizer."

Perguntas Exemplo​

Configure sugestões de perguntas para facilitar a interação:

Exemplos Padrão:​

  1. "Olá, gostaria de conhecer seu portfólio"
  2. "Qual seu contato para orçamento?"

Funcionalidades:​

  • ➕ Adicionar mais perguntas: Até 5 sugestões
  • ➖ Remover perguntas: Delete sugestões desnecessárias
  • ✏️ Editar perguntas: Personalize conforme seu negócio

Configurações de Resposta​

Perfil de Respostas​

  • Criativo: Respostas mais elaboradas e variadas
  • Balanceado (padrão): Equilíbrio entre criatividade e precisão
  • Preciso: Respostas diretas e objetivas

Desabilitar Chat Temporariamente​

❌ Desabilitado: Chat funcionando normalmente
☑️ Habilitado: Chat temporariamente fora do ar

Períodos disponíveis quando habilitado:

  • 4 horas: Manutenção rápida
  • 24 horas: Manutenção estendida
  • 7 dias: Pausa prolongada

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.