Apariencia y Posición

La página Apariencia y Posición te permite personalizar la apariencia visual y la ubicación del chatbot AAIA en tu sitio WordPress.

🎨 Apariencia Visual

Color Principal

El color principal define la paleta de colores de tu chatbot y sus elementos de interfaz.

Configuración

1. Campo de Color: Haz clic en el campo de color para abrir el selector de colores de WordPress
2. Código Hexadecimal: También puedes ingresar directamente un código de color hexadecimal (ej: #f40bc9)
3. Vista Previa en Tiempo Real: El color se aplica instantáneamente en la vista previa

Impacto del Color

Este color principal influye en:

• ✨ El icono del chatbot flotante
• 💬 Las burbujas de chat del asistente
• 🔘 Los botones de interfaz
• 🎯 Los elementos interactivos (enlaces, acciones)
• 📱 El encabezado de la ventana de chat

Buenas Prácticas

• Contraste: Asegúrate de que el color ofrezca un buen contraste con el fondo de tu sitio
• Coherencia: Elige un color que armonice con tu identidad visual
• Accesibilidad: Evita colores demasiado claros que puedan perjudicar la legibilidad

📍 Posición del Chatbot

Esta sección te permite controlar precisamente dónde aparece el chatbot en tu sitio.

Opciones de Posición

Selección de Posición

El menú desplegable ofrece dos opciones:

• Abajo a la Derecha (por defecto): Posición clásica, no intrusiva, recomendada para la mayoría de sitios
• Abajo a la Izquierda: Alternativa para sitios que tienen elementos fijos a la derecha (chat de cliente, botones sociales, etc.)

Distancia desde Abajo (en píxeles)

• Valor por defecto: 20 píxeles
• Uso: Distancia entre el chatbot y el borde inferior de la pantalla
• Consejo: Aumenta este valor (ej: 80px) si tienes un banner de cookies u otros elementos fijos en la parte inferior

Distancia desde el Lado (en píxeles)

• Valor por defecto: 20 píxeles
• Uso: Distancia entre el chatbot y el borde izquierdo o derecho según la posición elegida
• Consejo: Ajusta según el ancho de tu contenido y la presencia de otros elementos flotantes

🖼️ Vista Previa de Posición

La vista previa visual te muestra:

• 📱 La posición relativa del chatbot en la pantalla (zona turquesa)
• 🎯 La ubicación exacta del botón de chat (icono rosa)
• 📐 Una representación simplificada (no está a escala)

Nota Importante: La vista previa es informativa y simplificada. Para ver el resultado final, verifica siempre tu sitio en el frontend, especialmente en móvil.

⚙️ Configuraciones Recomendadas

Para la mayoría de sitios web

Posición: Abajo a la Derecha
Distancia desde abajo: 20px
Distancia desde el lado: 20px

Esta configuración estándar evita conflictos con los elementos de interfaz comunes.

Si tienes un banner de cookies

Posición: Abajo a la Derecha
Distancia desde abajo: 80px
Distancia desde el lado: 20px

Aumentar la distancia desde abajo evita que el chatbot sea ocultado por el banner de cookies.

Para sitios con barra lateral fija a la derecha

Posición: Abajo a la Izquierda
Distancia desde abajo: 20px
Distancia desde el lado: 20px

El posicionamiento a la izquierda evita conflictos con las barras laterales fijas o widgets.

Para sitios de comercio electrónico con carrito flotante

Posición: Abajo a la Izquierda
Distancia desde abajo: 20px
Distancia desde el lado: 80px

Esta configuración evita conflictos con los iconos de carrito típicamente ubicados en la parte inferior derecha.

🔧 Problemas Comunes y Soluciones

El chatbot se superpone con otros elementos

Diagnóstico: Otros elementos flotantes (chat en vivo, botones sociales, carrito) ocupan la misma zona.

Soluciones:

1. Cambiar la posición (derecha → izquierda o viceversa)
2. Aumentar las distancias para crear más espacio
3. Modificar el orden de visualización de otros elementos en tu tema

El chatbot no es visible en móvil

Diagnóstico: Las distancias configuradas exceden el tamaño de la pantalla móvil.

Soluciones:

1. Reducir las distancias (especialmente la distancia desde el lado)
2. Probar en múltiples tamaños de pantalla
3. Verificar que ningún elemento CSS esté ocultando el chatbot

El color no corresponde con mi tema

Soluciones:

1. Inspecciona tu tema: Usa las herramientas de desarrollador de tu navegador (F12) para identificar los colores principales de tu sitio
2. Herramientas de color: Usa servicios como Coolors.co o Adobe Color para encontrar colores armoniosos
3. Test de contraste: Verifica la accesibilidad con herramientas como WebAIM Contrast Checker

La vista previa no corresponde al resultado final

Explicación: La vista previa es una representación simplificada que no considera:

• Tu tamaño de pantalla real
• Los elementos CSS específicos de tu tema
• Las modificaciones responsive

Solución: Usa la vista previa como guía general, pero siempre prueba el resultado en tu sitio real.

💡 Consejos de Optimización

Selección de Color

Psicología de los Colores

• Azul: Confianza, profesionalismo (ideal para B2B)
• Verde: Naturaleza, salud, crecimiento (perfecto para ecología, bienestar)
• Naranja: Energía, creatividad (excelente para conversiones)
• Violeta: Lujo, innovación (adecuado para productos premium)

Pruebas Técnicas

• Usa un verificador de contraste para cumplir con la accesibilidad WCAG
• Prueba el color en fondos claros Y oscuros
• Verifica la visualización en diferentes pantallas (calibraciones diferentes)

Optimización de Posición

Análisis Comportamental

• Observa los mapas de calor de tu sitio para identificar las zonas de atención
• Evita colocar el chatbot en zonas de alta interacción
• Considera los recorridos típicos de usuario de tu sitio

Pruebas A/B

• Prueba diferentes posiciones durante varias semanas
• Mide el compromiso (aperturas de chat, mensajes enviados)
• Analiza los comentarios de usuarios sobre accesibilidad

Diseño Responsive

Adaptación Automática

El chatbot AAIA se adapta automáticamente:

• Desktop: Posición fija según tus parámetros
• Tableta: Ajuste automático de márgenes y tamaños
• Móvil: Optimización táctil y reposicionamiento si es necesario

Pruebas Multi-dispositivo

• Verifica en iPhone y Android
• Prueba en modo vertical y horizontal
• Asegúrate de que el chatbot permanezca accesible con los teclados virtuales

🎯 Configuración y Pruebas

Pasos de Configuración

1. Definir tu color principal

   • Obtén el código de color de tu tema
   • Prueba el contraste con el fondo de tu sitio

2. Elegir la posición óptima

   • Analiza los elementos existentes en tu sitio
   • Selecciona la posición menos intrusiva

3. Ajustar las distancias

   • Comienza con los valores por defecto (20px)
   • Adapta según tus elementos fijos

4. Probar en tu sitio

   • Verifica la visualización en desktop y móvil
   • Prueba la interacción (clic, apertura)

5. Optimizar según los comentarios

   • Recopila opiniones de los visitantes
   • Ajusta si es necesario

Lista de Verificación de Validación

• El color armoniza con tu identidad visual
• El chatbot es visible en todas las páginas
• Sin conflictos con otros elementos flotantes
• Buena visualización en móvil y tableta
• Accesibilidad respetada (contraste suficiente)
• Posición no intrusiva para la experiencia del usuario

🔗 Próximos Pasos

Una vez configurada la apariencia y posición:

1. Configurar tu asistente: Personalizar el comportamiento y las respuestas
2. Configurar tu clave API: Conectar el chatbot a los servicios de IA
3. Explorar las funcionalidades avanzadas: Preguntas personalizadas, integraciones, etc.