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 reflictam 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 customização é dividida em duas seções principais:

🎨 Secção Esquerda: Configurações​

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

👁️ Secçã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 (predefinido): Opções básicas de personalização.
☑️ Habilitado: 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 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 cor que não canse a vista

Cores Avançadas (Modo Avançado)​

Quando o modo avançado está activo, 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 o seu chatbot se comunica com os utilizadores:

Papel​

Escolha a função principal do seu chatbot:

  • Vendedor (predefinido): 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 contacto com um especialista."
  2. "Não faça julgamentos ou comparações com produtos concorrentes. Apenas enfatize as qualidades dos 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​

  • Predefinido: "Olá, como posso ajudar?"
  • Personalização: Primeira impressão do utilizador

Placeholder​

  • Predefinido: "Diga-me o que procura e vou ajudá-lo"
  • 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 compreendi o que quis dizer."

Perguntas Exemplo​

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

Exemplos Predefinidos:​

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

Funcionalidades:​

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

Configurações de Resposta​

Perfil de Respostas​

  • Criativo: Respostas mais elaboradas e variadas
  • Balanceado (predefinido): Equilíbrio entre criatividade e precisão
  • Preciso: Respostas directas e objectivas

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

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​

  • ✅ 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 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.