Configuración del Widget Web

​

🎛️ Resumen de tus Widgets

• ¿Por qué tener más de uno? Puede que quieras un “Bot de Ventas” para tu página de precios y un bot de “Soporte Técnico” para tu centro de ayuda. Aquí los gestionas todos.
• Acciones clave por Widget:
  • 📋 Copiar Script: Obtén el código mágico para pegar en tu sitio web.
  • ⚙️ Configurar: La parte divertida. Ajusta colores, mensajes y comportamiento (lo vemos en un momento).
  • 🗑️ Eliminar: Tíralo si no lo necesitas.

​

🎨 Personalizar tu Widget (La Clase de Arte)

​

1. Lo Básico

• Agente de IA: ¿Qué cerebro alimenta este chat? Selecciona uno de tus agentes de la lista.
• Idiomas: ¿Tu sitio habla inglés, español y francés? Díselo al widget para que no quede en ridículo.

​

2. Mensaje Flotante (El Gancho 🪝)

• Aburrido: “Chatea aquí.”
• Mejor: “¡Hola! ¿Necesitas ayuda con tu pedido? 👋”

⚠️ Atención: Añade traducciones para todos tus idiomas. ¡No querrás que los visitantes de habla hispana vean una burbuja en blanco!

​

3. Aspecto Visual (Viste para Impresionar)

• Cabecera: Elige qué se muestra arriba. ¿Solo un título? ¿Tu logo? ¿Un avatar de un robot con monóculo? Depende de ti.
• Colores: Usa la herramienta de cuentagotas 🖊️ para coincidir exactamente con tu marca.
  • Color principal: Las burbujas de mensajes y el botón de enviar.
  • Color de texto: ¡Asegúrate de que sea legible! El texto amarillo sobre fondo blanco es un crimen contra la vista.

​

4. El Portero: Formularios de Recogida de Datos 📝

• Pide Nombre, Email o Teléfono.
• Haz los campos “Obligatorios” si eres estricto, u “Opcionales” si eres más relajado.
• RGPD / Privacidad: Añade un enlace a tu política para cumplir con la ley. 👮‍♂️

​

5. Recogida Inteligente de Datos (Avanzado 🤓)

• Cómo ayuda: Si ha iniciado sesión, el widget puede decir “¡Hola, Juan!” en lugar de pedirle su nombre de nuevo.
• Configuración: Tú nos dices la “Clave” (ej. user_email) y nosotros obtenemos el valor automáticamente.

​

🛠️ Ajustes Extra y Diseño

• Posición: ¿Izquierda o Derecha? (La derecha es estándar, la izquierda es para rebeldes).
• Pantalla Completa: ¿Quieres que el chat ocupe toda la pantalla del móvil? Actívalo.
• Incrustado (Elemento DOM): En lugar de una burbuja flotante, incrusta el chat permanentemente dentro de un <div> en tu página. Ideal para páginas de “Contacto”.
• CSS Personalizado (CSS extra): Si sabes de código, puedes escribir tus propios estilos aquí para sobrescribir los nuestros. Lo vemos en detalle en la siguiente sección. El cielo es el límite.

​

🎨 CSS Personalizado (CSS extra) — La Guía del Diseñador

​

⚙️ Cómo funciona por dentro

1. Tu CSS se guarda junto a la configuración del widget.
2. Cuando el widget se carga en la web del visitante, tu CSS se inyecta como una etiqueta <style> dentro del propio widget.
3. Se carga después de nuestros estilos por defecto, así que tus reglas tienen la última palabra (ganan en caso de empate).

🎯 Importante — Alcance: El CSS extra solo afecta al interior del chat del widget, no al resto de tu página web. No puedes usarlo para cambiar tu sitio; solo el widget. Y al revés: los estilos de tu web no se cuelan dentro del widget, así que parte de un lienzo limpio.

💪 ¿Mi regla no aplica? Como nuestros estilos base son específicos, a veces tu regla “empata” y no gana. Si ves que un cambio no surte efecto, añade !important al final de la propiedad (ej. border-radius: 0 !important;) o usa un selector más específico.

​

🧩 Selectores que puedes usar

​

💡 Ejemplos prácticos

.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}

.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}

.widget_chat_window_footer {
  padding: 14px !important;
}

🧪 Pruébalo siempre en el Playground (ver más abajo) antes de publicar. Un } olvidado puede romper varios estilos a la vez.

​

🧪 Prueba de Manejo (Playground)

• ¿El color choca?
• ¿El Agente es educado?
• ¿Funciona el formulario?