Saltar al contenido principal

Personalizar Apariencia

¡Crea una experiencia única para tus clientes personalizando completamente la apariencia de tu chatbot! Configura colores, estilos y mensajes que reflejen la identidad de tu marca y se adapten perfectamente a tu sitio web.

Contexto Actual

La apariencia está siendo editada en el contexto: [CONTEXTO_ACTUAL]. Cada contexto puede tener su propia personalización visual.

Diseño de la Página​

La página de personalización se divide en dos secciones principales:

🎨 Sección Izquierda: Configuraciones​

Panel con todas las opciones de personalización del chatbot

👁️ Sección Derecha: Vista Previa​

Área de previsualización en tiempo real de los cambios

Personalizar AparienciaPersonalizar Apariencia

Modo Avanzado​

Alternar Modo Avanzado​

❌ Deshabilitado (por defecto): Opciones básicas de personalización.
☑️ Habilitado: Acceso a configuraciones avanzadas y detalladas

Cuándo usar el Modo Avanzado

Activa el modo avanzado cuando necesites control total sobre colores, espaciados y elementos específicos de la interfaz.

Apariencia del Chatbot​

Información Básica​

Nombre del Bot​

  • Personalización: Define cómo se presenta el chatbot
  • Ejemplo: "Asistente Virtual", "Maya - Atención", "Bot de la Tienda"
  • Impacto: Aparece en la cabecera del chat

Nombre de la Empresa​

  • Personalización: Identifica tu empresa en el chat
  • Ejemplo: "Empresa XYZ", "Tienda Virtual", "Consultoría ABC"
  • Impacto: Aparece junto al nombre del bot

Avatar de la IA​

  • Formato: JPG o PNG
  • Tamaño máximo: 5MB
  • Dimensiones recomendadas: 1024x1024 píxeles
  • Uso: Representa visualmente tu 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.