> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuración del Widget Web

> En esta sección aprenderás a integrar y personalizar el widget web de Lovi para que encaje perfectamente con el diseño y la funcionalidad de tu sitio web

<img src="https://mintcdn.com/lovi/O5wVbHgTE_jPQc6B/images/WidgetsList.png?fit=max&auto=format&n=O5wVbHgTE_jPQc6B&q=85&s=6975ebc2214376c1e59e012e4bf9a0ef" alt="Lista de Widgets Web" width="1682" height="479" data-path="images/WidgetsList.png" />

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.

***

### 🎨 Personalizar tu Widget (La Clase de Arte)

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:

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

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:**

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

**Agrandar el texto de los mensajes:**

```css theme={null}
.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}
```

**Cabecera con un degradado de marca:**

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

**Dar más aire al área de escritura:**

```css theme={null}
.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! 🚀**