Personalizar Apariencia
Configura colores y estilos para que tu chatbot y showcase reflejen tu marca
Dos editores independientes
BOT247 tiene editores separados para chatbot y showcase, cada uno con sus propias opciones de personalización. Esto te da control granular sobre cada experiencia.
- Editor de Chatbot: Personaliza la interfaz de conversación
- Editor de Showcase: Personaliza el micrositio y landing page
Editor de Apariencia del Chatbot
Acceso al editor
Desde el dashboard → Selecciona tu chatbot → Pestaña "Apariencia" o botón "Editar apariencia"
Opciones de personalización
Colores generales
- Fondo del chat
- Color primario (botones, accents)
- Color de texto principal
- Color de texto secundario
Burbujas de mensaje
- Color de burbujas del usuario
- Color de texto en burbujas del usuario
- Color de burbujas del asistente
- Color de texto del asistente
Entrada de chat
- Fondo del input
- Borde del input
- Color del texto
- Color del placeholder
- Color del botón de enviar
Sidebar de conversaciones
- Fondo del sidebar
- Color de texto
- Color de items hover/activo
- Color de bordes internos
Pantalla de bienvenida
- Color del título
- Color del subtítulo
- Mensaje de saludo personalizado
Avatar y logo
- Subir logo/avatar personalizado
- Color de placeholder del avatar
- Iniciales del chatbot
Editor de Apariencia del Showcase
Acceso al editor
Desde la vista del chatbot → "Ver Showcase" → "Editar showcase" → Pestaña "Apariencia"
Opciones de personalización
Fondo
- Color sólido, gradiente o imagen
- Opacidad del overlay
- Blur effect
- Patrones (grid, dots, noise)
Avatar/Perfil
- Tamaño del avatar (small, normal, large)
- Escala personalizada
- Mostrar/ocultar borde
- Color de fondo del avatar
Botones y enlaces
- Estilo por defecto (solid, outline, glass)
- Color primario y secundario
- Radio de esquinas
- Altura de botones
- Tamaño y fuente del texto
- Mayúsculas/minúsculas
- Sombras on/off
- Iconos on/off
Botón de chat
- Color de acento
- Color de texto
- Etiqueta personalizada ("Abrir chat", "Habla conmigo", etc.)
- Radio de esquinas
- Sombras on/off
Tipografía
- Escala general (sm, md, lg)
- Caso de texto (normal, uppercase)
- Fuentes independientes para: título, ubicación, bio
- Colores para: encabezados, texto, descripciones
Iconos
- Color de iconos
- Color de fondo de iconos
- Tamaño de iconos
Sistema de Preview en Tiempo Real
Cómo funciona
Ambos editores tienen un panel de preview a la derecha que se actualiza en tiempo real mientras haces cambios. Esto te permite ver exactamente cómo se verá tu chatbot o showcase antes de guardar.
- Los cambios se reflejan instantáneamente
- Puedes alternar entre modo light/dark
- El preview es completamente interactivo
- No necesitas guardar para probar
Auto-guardado
Los cambios se guardan automáticamente después de 2 segundos de inactividad. También puedes hacer clic en "Guardar cambios" manualmente en cualquier momento.
Temas Light y Dark
BOT247 maneja automáticamente dos paletas separadas:
- Paleta Light: Colores para modo claro (fondos claros, textos oscuros)
- Paleta Dark: Colores para modo oscuro (fondos oscuros, textos claros)
Los visitantes verán automáticamente el tema que coincida con su preferencia del sistema operativo. También pueden alternar manualmente entre light/dark con el toggle.
Consejos de diseño
- •Contraste legible: Asegura al menos 4.5:1 de contraste entre texto y fondo
- •Prueba en ambos modos: Revisa cómo se ve en light y dark antes de publicar
- •Consistencia: Usa la paleta global para mantener colores consistentes
- •Menos es más: 2-3 colores principales son suficientes
- •Accesibilidad: Evita depender solo del color para comunicar información