¿Que estas buscando?
Ánima Bot permite personalizar completamente la apariencia de tu chatbot para que coincida con tu marca, estilo o identidad visual.
Desde colores, tipografías y burbujas hasta avatares e imágenes del encabezado, cada detalle se puede ajustar para mejorar la experiencia del usuario.
A continuación, veremos uno por uno los elementos que podés modificar dentro de la sección de diseño.
1️⃣ Avatares
El apartado Avatares te permite definir las imágenes que representarán tanto al bot como al usuario dentro de la conversación.
Qué podés configurar?
Avatar del chatbot
Es la imagen que verán tus usuarios cada vez que el bot envía un mensaje.
Podés:
- Elegir entre las imágenes predeterminadas.
- Subir tu propio avatar (JPG o PNG).
- Definir un color de fondo para el círculo del avatar.
Usos frecuentes:
- Usar el logo de tu marca.
- Usar una ilustración o personaje que represente el estilo del bot.
- Mantener una estética profesional o más amigable según el público objetivo.
Avatar del usuario
Es la imagen que representa a la persona que está chateando.
Opciones:
- Dejar la imagen por defecto.
- Subir un avatar personalizado si querés darle una estética uniforme (por ejemplo, en bots internos de empresas).
Alineación del ícono
Permite definir de qué lado aparece el avatar del chatbot en la conversación:
- Izquierda (configuración estándar en la mayoría de los sistemas de mensajería).
- Derecha (por si preferís un diseño alternativo).
Esto no afecta el funcionamiento del bot, pero sí la experiencia visual.
2️⃣ Encabezado
El apartado Encabezado te permite personalizar la parte superior del widget del chatbot. Es la primera impresión visual, por lo que es ideal para adaptar el bot a la identidad de tu marca o proyecto.
Incluye dos elementos principales:
Logo del chatbot
Podés subir una imagen que representará al chatbot en el encabezado.
Recomendaciones:
- Formato ideal: PNG o SVG
- Fondo transparente (opcional pero recomendable)
- Tamaño sugerido: 250×250 px para que escale bien
Esta imagen aparecerá en la parte superior del widget cuando el usuario abre el bot.
Título del chatbot
Podés definir un texto que acompañe al logo.
Usos comunes:
- Nombre del chatbot
- Nombre de tu empresa
- Título descriptivo (ej. “Asistente Virtual”, “Soporte Online”, “Consultas 24/7”)
Este título ayuda al usuario a ubicarse y saber con quién está interactuando.
Color de fondo
También podés personalizar el color del encabezado para que coincida con tu paleta visual.
Recomendaciones:
- Usá un color que contraste con el título y el logo
- Buscá coherencia con tu sitio web o identidad gráfica
3️⃣ Ventana
La sección Ventana te permite personalizar el espacio donde se desarrolla la conversación entre el usuario y tu chatbot.
Es una parte clave del diseño, porque define la estética general del widget y su integración visual con tu marca o sitio.
Incluye dos opciones principales:
Fondo de color
Podés elegir un color sólido para el fondo de la ventana de chat.
Ideal si buscás un estilo limpio, minimalista o que combine con la paleta de tu sitio.
✔ Beneficios
- Mayor simplicidad visual
- Mejor contraste con el texto
- Rápido de configurar
Imagen o patrón
También podés cargar un fondo personalizado, como:
- Una textura suave
- Un patrón repetitivo
- Una imagen de marca
- Un diseño ilustrado
Basta con seleccionar “Imagen o patrón” y subir tu archivo.
✔ Beneficios
- Le da personalidad al chat
- Refuerza la identidad visual de tu marca
- Más atractivo para el usuario
Tip profesional
Preferí imágenes claras y de baja distracción.
El fondo no debe competir con el contenido del chat.
4️⃣ Burbujas de chat y botones
En esta sección podés personalizar completamente el aspecto de cada tipo de mensaje y botones dentro del chatbot. Es una de las áreas más importantes porque define cómo se ve y cómo se siente la conversación para el usuario.
Podés editar los colores de:
- Mensajes del chatbot
- Mensajes del usuario
- Opciones / Botones del menú
- Botón de menú
- Botón de links
- Botón de carga
Cada elemento permite modificar su:
- Fondo
- Texto
- Borde
Burbuja de mensaje del chatbot
Esta configuración controla cómo se ve el mensaje que envía Ánima.
Podés cambiar:
- Color de fondo: ideal usar un color principal de tu marca.
- Color del texto: asegurate de que contraste bien con el fondo.
- Color del borde: opcional, para un estilo más definido.
Recomendación:
Fondo suave + texto oscuro para máxima legibilidad.
Burbuja de mensaje del usuario
Define cómo se ven los mensajes que escribe la persona.
Podés modificar:
- Fondo
- Texto
- Borde
Recomendación:
Diferenciar visualmente al usuario del bot (ej: fondo gris claro).
Burbuja de botones / opciones
Estos son los botones que aparecen como respuestas rápidas.
Podés personalizar:
- Fondo
- Texto
- Borde
Recomendación:
Usá colores llamativos, pero que no compitan con el mensaje del bot.
Botón de menú (menú anterior / menú principal)
Botón que aparece en algunos flujos para volver atrás o abrir el menú superior.
Editable en:
- Fondo
- Texto
- Borde
Recomendación:
Usar un color neutro para evitar confusiones.
Botón de links
Cuando un nodo contiene enlaces, este botón controla su aspecto.
Podés ajustar:
- Fondo
- Texto
- Borde
Recomendación:
Si usás muchos links, mantené el diseño simple.
Botón de carga
Botón que aparece cuando se está procesando una acción (generalmente animado).
Podés definir:
- Fondo
Recomendación:
Debe armonizar con la paleta general, pero sin llamar demasiado la atención.
5️⃣ Tipografías
La sección de Tipografías te permite definir la letra base con la que se mostrarán todos los textos dentro del chatbot: mensajes del bot, mensajes del usuario, botones, encabezados y cualquier texto del diseño.
Modificar la tipografía te ayuda a lograr coherencia visual con la identidad de tu marca o sitio web.
Cómo funciona
Solo debés abrir el desplegable y elegir una de las fuentes disponibles.
La selección se aplica automáticamente a todo el chatbot cuando guardás los cambios.
Tipografías disponibles
El menú desplegable ofrece las siguientes opciones:
- Roboto → Moderna, simple, excelente legibilidad (recomendada por defecto).
- Lato → Redondeada y amable, muy buena para interfaces conversacionales.
- Calibri → Clásica y limpia, similar a un estilo corporativo.
- Times New Roman → Opción serif tradicional, útil para estilos más formales.
- Montserrat → Muy utilizada en branding moderno; títulos claros y llamativos.
- Raleway → Elegante y estilizada, ideal para diseños minimalistas.
- Inter → Pensada para pantallas, gran legibilidad en diálogos.
- Open Sans → Equilibrada y versátil, funciona bien en cualquier tipo de chatbot.
Recomendación
Para chatbots modernos y fáciles de leer, estas son las mejores opciones:
- Roboto
- Inter
- Open Sans
- Lato
No olvides guardar
Una vez que realices modificaciones, presioná Guardar cambios para aplicar la nueva apariencia.
