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

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.