Personaliza tu widget: colores, mensajes y posición

Tu chatbot es una extensión de tu marca. No debería parecer un elemento extraño en tu web, sino integrarse perfectamente con el diseño de tu tienda.

En este tutorial te mostramos todas las opciones de personalización del widget de Lia para que coincida con la identidad visual de tu marca.

Accediendo a la configuración del widget

1. Inicia sesión en app.hellolia.es
2. Ve a Configuración en el menú lateral
3. Haz clic en Widget
4. Verás el panel de personalización con vista previa en tiempo real

Sección 1: Colores

Color principal

El color principal se usa para:

• El botón del chat (el círculo que aparece en la web)
• La cabecera del chat cuando está abierto
• Botones de acción
• Elementos destacados

Cómo configurarlo:

1. Haz clic en el selector de color
2. Introduce el código hexadecimal de tu marca (ej: #FF6B35)
3. O usa el selector visual para elegir
4. La vista previa se actualiza instantáneamente

Consejos:

• Usa el color principal de tu marca
• Asegúrate de que tiene buen contraste con el fondo
• Evita colores demasiado claros (difíciles de ver sobre blanco)

Color secundario

Se usa para:

• Texto sobre fondos de color
• Iconos
• Enlaces

Recomendación: Normalmente blanco (#FFFFFF) o negro (#000000) según el color principal.

Color de fondo del chat

El fondo de la ventana de conversación.

Opciones comunes:

• Blanco (#FFFFFF) - Clásico y limpio
• Gris muy claro (#F5F5F5) - Suave
• Color de tu marca muy desaturado

Color de los mensajes

Mensajes del chatbot:

• Color de fondo: Normalmente gris claro
• Color de texto: Negro o gris oscuro

Mensajes del usuario:

• Color de fondo: Tu color principal (o variación)
• Color de texto: Blanco o según contraste

Sección 2: Textos y mensajes

Mensaje de bienvenida

El primer mensaje que ve el usuario al abrir el chat.

Ejemplo básico:

¡Hola! 👋 Soy el asistente virtual de [Tu Tienda]. ¿En qué puedo ayudarte?

Ejemplo más elaborado:

¡Bienvenido/a a [Tu Tienda]!

Puedo ayudarte con:
• Información sobre envíos y entregas
• Devoluciones y cambios
• Dudas sobre productos

¿Qué necesitas?

Consejos:

• Mantén el tono de tu marca
• Sé breve pero informativo
• Puedes usar emojis si encajan con tu marca (con moderación)

Nombre del asistente

Cómo se presenta el chatbot.

Opciones:

• "Lia" (nombre por defecto)
• "Asistente de [Tu Marca]"
• Un nombre propio que encaje con tu marca
• "[Tu Marca] Bot"

Placeholder del input

El texto gris que aparece en el campo de escritura.

Ejemplos:

• "Escribe tu mensaje..."
• "¿En qué puedo ayudarte?"
• "Pregúntame lo que necesites"

Mensaje fuera de horario

Si configuras horario de atención, este mensaje aparece fuera de horario.

Ejemplo:

Ahora mismo estamos fuera de horario (L-V 9-18h).

Puedes dejar tu consulta y te responderemos mañana a primera hora.

También puedes consultar nuestras FAQ: [enlace]

Sección 3: Posición y tamaño

Posición en pantalla

Esquina inferior derecha (por defecto)

• La posición más común
• Donde los usuarios esperan encontrar el chat
• Recomendada salvo que haya conflicto

Esquina inferior izquierda

• Alternativa si la derecha está ocupada
• Útil si tienes otros elementos en la derecha (WhatsApp, cookies, etc.)

Márgenes

Distancia del widget a los bordes de la pantalla.

Margen inferior: 20px por defecto

• Auméntalo si hay elementos fijos en el footer

Margen lateral: 20px por defecto

• Auméntalo si hay otros botones flotantes cerca

Tamaño del botón

Opciones:

• Pequeño: 50px - Discreto, para sitios minimalistas
• Mediano: 60px (por defecto) - Equilibrio entre visibilidad y discreción
• Grande: 70px - Máxima visibilidad

Tamaño de la ventana de chat

Ancho:

• Estrecho: 320px - Para móviles principalmente
• Normal: 380px (por defecto) - Buen balance
• Ancho: 420px - Más espacio para conversaciones

Alto:

• Configurable o automático según contenido
• Máximo recomendado: 600px

Sección 4: Icono del botón

Iconos predefinidos

Lia incluye varios iconos para elegir:

• 💬 Chat bubble clásico
• 🤖 Robot simpático
• 💁 Asistente
• ❓ Interrogación
• Tu logo personalizado

Logo personalizado

Puedes subir tu propio icono:

1. Haz clic en "Subir icono personalizado"
2. Sube una imagen (PNG o SVG, fondo transparente recomendado)
3. Tamaño recomendado: 100x100px mínimo
4. Verifica que se ve bien en el preview

Consejos:

• Usa un icono simple que se vea bien pequeño
• Fondo transparente para mejor integración
• Asegúrate de que contrasta con el color del botón

Sección 5: Comportamiento

Auto-apertura

Configura si el chat se abre automáticamente:

Opciones:

• Nunca: Solo cuando el usuario hace clic
• Después de X segundos: Se abre solo si el usuario lleva tiempo en la página
• En páginas específicas: Solo en checkout, producto, etc.

Recomendación: "Nunca" o después de 30-60 segundos en páginas clave.

Mensaje proactivo

Un mensaje que aparece junto al botón para llamar la atención.

Ejemplo:

¿Tienes dudas? ¡Pregúntame!

Configuración:

• Activar/desactivar
• Después de cuántos segundos aparece
• Si desaparece al hacer scroll o permanece

Sonido de notificación

Cuando el chatbot responde:

• Sin sonido
• Sonido suave
• Sonido estándar

Recomendación: Sin sonido o sonido suave. Los sonidos intrusivos molestan.

Sección 6: Móvil

Vista en móvil

El widget se adapta automáticamente, pero puedes ajustar:

Posición del botón:

• Puede moverse para no interferir con elementos de navegación
• Ajusta márgenes específicos para móvil

Comportamiento de la ventana:

• Pantalla completa: El chat ocupa toda la pantalla
• Popup: Se abre como ventana flotante (puede ser incómodo)

Recomendación: Pantalla completa en móvil para mejor experiencia.

Ocultar en móvil

Si por alguna razón no quieres el chat en móvil:

• Opción para ocultar completamente
• O mostrar solo el botón sin auto-apertura

Sección 7: Configuración avanzada

CSS personalizado

Si necesitas ajustes específicos que no están en las opciones:

/* Ejemplo: Cambiar la fuente */
#lia-widget {
    font-family: 'Tu Fuente', sans-serif;
}

/* Ejemplo: Redondear más los bordes */
#lia-chat-window {
    border-radius: 20px;
}

Atributos de datos

Para integraciones avanzadas:

<script>
  window.liaConfig = {
    hideOnPages: ['/cuenta', '/checkout/gracias'],
    showOnPages: ['/productos/*', '/contacto'],
    userEmail: 'email@usuario.com', // Si conoces al usuario
    userData: {
      nombre: 'Juan',
      cliente_vip: true
    }
  };
</script>

Verificando la personalización

Después de guardar cambios:

1. Abre tu tienda en modo incógnito (para evitar caché)
2. Verifica en escritorio:
   • ¿El botón es visible?
   • ¿Los colores son correctos?
   • ¿El chat se abre correctamente?
3. Verifica en móvil:
   • ¿El botón no tapa elementos importantes?
   • ¿El chat es usable?
4. Prueba una conversación completa

Ejemplos de personalización por tipo de tienda

Tienda de moda minimalista

• Color principal: Negro (#000000)
• Icono: Chat bubble simple
• Mensaje: "¿Te ayudo a encontrar tu talla?"
• Posición: Derecha, márgenes amplios

Tienda de electrónica

• Color principal: Azul tecnológico (#0066CC)
• Icono: Robot
• Mensaje: "¿Dudas técnicas? ¡Pregúntame!"
• Posición: Derecha, tamaño mediano

Tienda de productos naturales

• Color principal: Verde (#4CAF50)
• Icono: Asistente o logo propio
• Mensaje: "Hola 🌿 ¿En qué puedo ayudarte?"
• Posición: Izquierda (si hay WhatsApp a la derecha)

Conclusión

La personalización del widget no es solo estética. Un widget bien integrado con tu marca genera más confianza y más interacciones.

Dedica unos minutos a ajustar colores, mensajes y posición. La diferencia entre un widget genérico y uno personalizado es notable.

---

¿Necesitas ayuda con la personalización? Nuestro equipo puede revisar tu configuración y sugerirte mejoras. Contacta en hellolia.es.