Configuración del Widget Web

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.

Cómo incrustarlo (chat)

Pégalo antes de </body>. No pongas mode="voice" (eso carga el widget de voz).

<script
  customer="TU_ACCESS_KEY"
  widget="TU_WIDGET_ID"
  src="https://widget.lovi.ai/iawidget.js"
  defer
></script>

No uses language="en". El loader lee language-lovi. Si lo omites, usa navigator.language (dos letras; un → en).

Atributo	Obligatorio	Qué es
`src`	Sí	`https://widget.lovi.ai/iawidget.js`
`customer`	Sí	Access key de la empresa (no un “company ID” suelto). El script la manda como `access_key`.
`widget`	Sí	UUID del widget.
`language-lovi`	No	Idioma forzado (`es`, `en`, …).
`showClose`	No	Por defecto `true`. `showClose="false"` abre el chat a página completa y oculta cerrar.
`dom`	No	id de un elemento HTML (`getElementById`), no un selector CSS (`#foo` / `.bar`). El embed corre si hay `dom`, o si en config `is_fullscreen` y existe `element_dom`. Sin nodo, no hay embed.
`extra-context`	No	Lista separada por comas → `context_extra` del mensaje.
`lovi-source`	No	Se guarda en `info_user.source`.
`whatsapp_type` / `whatsapp_number`	No	Ver WhatsApp abajo.
`mode`	No	Omisiónalo (o cualquier valor que no sea `voice`) para chat de texto.

Orden del loader: mode="voice" → WhatsApp full → chat. El atributo url del <script> no hace nada. La config se cachea 24 h en localStorage con clave = id del widget.

URLs

Loader: https://widget.lovi.ai/iawidget.js
Iframe de chat: https://widget.lovi.ai (query opcional ?showClose=false y/o lang={language-lovi})
Config: GET https://cloud.lovi.ai/functions/v1/widget?access_key=…&id_widget=…&language=… (la clave la pone el script; no la pongas en capturas)
Chat dentro del iframe: …/functions/v1/widget/{user,chat,messages,…} — sesión interna, no API pública de embed

No uses voice-widget ni ?mode=voice en esta página. El loader crea #app-chatbot en el host. El chat vive en el iframe #app-chatbot-iframe (allow="fullscreen; autoplay; encrypted-media; picture-in-picture" — sin micrófono). Handshake postMessage (get_widget, get_customer, data_collection, save_customer, close, reset, new_message). Escritorio: 450px × 85vh (máx. 824px), bottom/right: 10px (o izquierda si floating_position es "left"). Viewport max-width 650px (y max-height 650px): el iframe ya es el 100% del viewport (border-radius: 0). Eso no es el toggle de “Pantalla completa” de la config. is_fullscreen + element_dom incrustan en un nodo; showClose="false" cubre toda la página en cualquier viewport. Launcher: bottom: 10px; right: 20px.

WhatsApp (dos caminos)

Script: whatsapp_type="full" y whatsapp_number no vacío → no carga el chat; solo un botón a https://wa.me/{número}.
Config del widget: whatsapp_type == true y número, solo si innerWidth ≤ 650 → sustituye la burbuja de chat en móvil.

Si el HTML también tiene mode="voice", gana la voz frente a WhatsApp full.

Allowlist del host (CSP / firewall)

widget.lovi.ai y cloud.lovi.ai. El widget no envía cabecera Content-Security-Policy.

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

Por cada clave de la config, el loader lee localStorage o sessionStorage o una cookie JS, o (si source === "js_global") una variable window por ruta con puntos. Siempre manda url: location.href. El name de salida es opcional. Esos valores van al contexto del mensaje; el widget no saluda solo “Hola, Juan” salvo que tu agente lo haga.

🛠️ 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 (config): Junto con element_dom, incrustan el chat en un nodo. No es el full bleed móvil: a max-width: 650px el iframe ya ocupa el viewport.
Incrustado (dom): id de un elemento HTML (no #id / .class). Si el nodo no existe, no hay embed.
CSS extra: Se inyecta como etiqueta <style> en el iframe y en el host (#app-chatbot) sin encapsular, así que puede afectar la página. Selectores del iframe: .widget_chat, .widget_chat_window, … Launcher en el host: .widget_chat_switch, .widget_chat_switch_open, #app-chatbot-iframe.

🎨 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.
Al cargar, tu CSS se inyecta dos veces: una etiqueta <style> dentro del iframe del chat (acotada al chat) y otra <style> en el host (#app-chatbot) sin encapsular (puede afectar el resto de la página).
En el iframe, tus reglas suelen ir después de los estilos por defecto. En el host, .widget_chat_switch y #app-chatbot-iframe pintan el launcher.

🎯 Alcance: Las clases de la ventana (.widget_chat, .widget_chat_window, …) aplican dentro del iframe. Las reglas del launcher en el host no están aisladas del CSS de tu sitio.

💪 ¿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! 🚀 Si lo que quieres es una llamada hablada en el navegador (micrófono, no burbuja de chat), usa el widget de voz.

Guía de Usuario

🎛️ Resumen de tus Widgets

Cómo incrustarlo (chat)

URLs

WhatsApp (dos caminos)

Allowlist del host (CSP / firewall)

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

​🎛️ Resumen de tus Widgets

​Cómo incrustarlo (chat)

​URLs

​WhatsApp (dos caminos)

​Allowlist del host (CSP / firewall)

​🎨 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)

🎛️ Resumen de tus Widgets

Cómo incrustarlo (chat)

URLs

WhatsApp (dos caminos)

Allowlist del host (CSP / firewall)

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