Configuración del Widget Web - Lovi AI Documentation

Este es el puente entre tu inteligente Agente y los visitantes de tu sitio web. El Widget Web es esa pequeña burbuja amigable en la esquina de la pantalla que dice “¡Hola!”. Integrarlo es muy sencillo: solo añades un fragmento de código en tu sitio, ¡y voilà! Tu Agente de IA está listo para chatear 24/7 sin que tengas que mover un dedo.

🎛️ Resumen de tus Widgets

Este es tu centro de mando de widgets. Aquí puedes ver cada burbuja de chat que has creado.

¿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.

Haz clic en el icono de engranaje ⚙️ para entrar al laboratorio de configuración. Hagamos que este widget sea verdaderamente tuyo.

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 🪝)

¡No dejes que tu bot se esconda! Configura un mensaje llamativo que aparezca encima del icono.

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 📝

¿Quieres saber con quién hablas antes de que empiecen a chatear? Activa el Formulario.

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 🤓)

Esto es para los magos de la tecnología. El widget puede mirar los datos de tu sitio web (localStorage) para ver si el usuario ya ha iniciado sesión.

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

Ajusta la experiencia:

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

¿Los colores y opciones predefinidas se te quedan cortos? El campo CSS extra te da control total sobre la apariencia del widget. Aquí puedes escribir reglas CSS que ajustan estilos, sobrescriben clases predeterminadas o incluso añaden animaciones. Dónde encontrarlo: Entra a la configuración del widget (icono ⚙️), despliega la sección “CSS extra” y escribe tu código en el área de texto.

⚙️ Cómo funciona por dentro

Lo que escribes aquí no es magia, es bastante predecible una vez que lo entiendes:

Tu CSS se guarda junto a la configuración del widget.
Cuando el widget se carga en la web del visitante, tu CSS se inyecta como una etiqueta <style> dentro del propio widget.
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

Estas son las “etiquetas” reales de las piezas del widget. Apunta a ellas con tu CSS:

Selector	Qué es
`.widget_chat`	El contenedor raíz de todo el widget
`.widget_chat_window`	La ventana del chat cuando está abierta
`.widget_chat_window_header`	La cabecera superior (avatar, título, botones)
`.widget_chat_window_body`	El área donde se ven los mensajes
`.widget_row_message`	Cada fila de mensaje (usa `.widget_row_message_end` para los del usuario)
`.widget_message_bot`	La burbuja de los mensajes del Agente
`.widget_message_content`	El texto dentro de cada burbuja
`.widget_message_botones` / `.widget_message_boton`	Los botones de respuesta rápida
`.widget_chat_window_footer`	La barra inferior donde se escribe
`#inputMessage`	El campo de texto para escribir el mensaje
`.widget_form_submit`	El botón de enviar
`.widget_chat_formulario`	El formulario de recogida de datos (nombre, email, etc.)
`.widget_chat_formulario_body_input_asterisk`	El asterisco rojo de los campos obligatorios
`.widget_chat_window_footer_legends`	La firma “Generated by lovi.ai” del pie

💡 Ejemplos prácticos

Burbujas del bot más cuadradas y con sombra:

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

Agrandar el texto de los mensajes:

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

Cabecera con un degradado de marca:

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

Dar más aire al área de escritura:

.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)

Antes de pegar el código en tu sitio en vivo, pruébalo en el Playground.

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

¡Una vez que estés satisfecho, copia ese script y publícalo! 🚀

​🎛️ Resumen de tus Widgets

​🎨 Personalizar tu Widget (La Clase de Arte)

​1. Lo Básico

​2. Mensaje Flotante (El Gancho 🪝)

​3. Aspecto Visual (Viste para Impresionar)

​4. El Portero: Formularios de Recogida de Datos 📝

​5. Recogida Inteligente de Datos (Avanzado 🤓)

​🛠️ Ajustes Extra y Diseño

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

​⚙️ Cómo funciona por dentro

​🧩 Selectores que puedes usar

​💡 Ejemplos prácticos

​🧪 Prueba de Manejo (Playground)