Pular para o conteúdo principal

Personalizar Aparência

Crie uma experiência única para os 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 Actual

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

Layout da Página​

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

Secção Esquerda: Configurações​

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

Secção Direita: Pré-visualização​

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

Personalizar AparênciaPersonalizar Aparência

Modo Avançado​

Alternar Modo Avançado​

❌ Desativado (predefinido): Opções básicas de personalização.
☑️ Ativado: Acesso a configurações avançadas e detalhadas

Quando usar o Modo Avançado

Active o modo avançado quando precisar de controlo 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 a 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 o 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 (predefinido): Equilíbrio entre visibilidade e discrição
  • Grande: Mais visível, chama mais à atenção

Posição do Chat​

  • Superior esquerdo: Canto superior esquerdo do ecrã
  • Superior direito: Canto superior direito do ecrã
  • Inferior esquerdo: Canto inferior esquerdo do ecrã
  • Inferior direito (predefinido): Posição mais comum e intuitiva

Modos de Exibição​

Configure quais elementos visuais serão exibidos:

  • ☑️ Mostrar avatar do utilizador: Exibe ícone do utilizador 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​

  • Controlo: Slider de ajuste
  • Função: Define distância das bordas do ecrã
  • Valores: 0px a 50px

Espaçamento​

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

Raio da Borda​

  • Controlo: 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​

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

Cor da Fonte​

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

Cor do Fundo do Modal​

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

Cores Avançadas (Modo Avançado)​

Quando o modo avançado está ativo, 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 escrita
  • 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 utilizador
  • 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

Controlos de Acção​

Botões Principais​

GUARDAR​

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

DESFAZER ALTERAÇÕES​

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

Preview em Tempo Real​

Funcionalidades do Preview​

Visualização Instantânea​

  • ✅ Alterações 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 envolvimento dos utilizadores. Invista tempo na personalização visual e comunicativa!

Importante

Sempre teste as suas configurações no preview antes de guardar. Pequenos ajustes podem fazer grande diferença na experiência do utilizador.