Con la API de JavaScript controlas tu agente de LeadWin desde tu propia web. Con tus propios botones abres el chat directamente en el formulario de contacto o en la reserva de citas, y el agente se adapta a tu modo oscuro y a tu selector de idioma. La página del panel es una guía con ejemplos de código para copiar y no cambia ningún ajuste.
De un vistazo
- Encontrarás la página en el panel de LeadWin, en Apariencia → API.
- La API está disponible en todas las suscripciones, también en Free. Las secciones que puede abrir, en cambio, dependen de tu suscripción. Consulta Comparativa de suscripciones.
- Necesitas tener en tu web el código de la instalación. Ese código solo lo recibes cuando el contrato de encargo del tratamiento está firmado. Si te registraste en leadwin.ai, ya está firmado. Si vienes de Feedbax, como empresa o como cliente, lo aceptas en Privacidad.
- Los botones con el atributo data-leadwin-open funcionan sin JavaScript propio, en cualquier CMS.
- Cada llamada solo afecta al visitante concreto y nunca cambia tus ajustes del panel.
- Esta página la ven el propietario y los administradores. Quién tiene cada rol se decide en Equipo.
Cómo funciona
El código de la instalación carga en tu web la función LeadWin. La llamas con un comando y un valor, por ejemplo LeadWin('open', 'lead'). Da igual si el comando va en mayúsculas o minúsculas. LeadWin ignora los comandos desconocidos, y la API nunca provoca un error en tu página.
Tu agente de LeadWin no se carga hasta que tu página ha terminado de cargarse. Si tu propio JavaScript lo llama antes, la estructura básica recoge la llamada y la pasa en cuanto el agente está listo. A la inversa, tu agente de LeadWin no cambia nada de tu página. Solo avisa cuando el chat se abre o se cierra. Qué hace tu página con ese aviso lo decides tú.
Estos son los comandos disponibles:
| Comando | Valor | Efecto |
|---|---|---|
| open | ninguno, lead, booking, helpcenter o profile | Abre el chat y, si quieres, directamente en una sección |
| close | ninguno | Cierra el chat |
| toggle | ninguno | Abre el chat si está cerrado y lo cierra si está abierto |
| ask | una pregunta de 1 a 1.000 caracteres | Abre el chat y hace la pregunta en nombre del visitante |
| theme | dark, light o auto | Cambia entre el diseño claro y el oscuro, solo con el tema API |
| language | de, en, fr, nl, es o auto | Cambia el idioma de la interfaz |
| article | clave de un artículo de ayuda | Abre el chat directamente en ese artículo |
| consent | granted o denied | Transmite la decisión de tu banner de cookies |
Añadir la estructura básica
Solo necesitas la estructura básica si llamas a LeadWin desde tu propio JavaScript. Para los botones con data-leadwin-open no hace falta.
- Abre Apariencia → API y, en la primera tarjeta, haz clic en Copiar código. El mensaje Código copiado lo confirma.
- Pega el código una vez en la sección head de tu página, por encima de los scripts que llaman a LeadWin.
- Deja el código de la instalación tal como está. Da igual dónde quede la estructura básica respecto a él.
<script>
globalThis.LeadWin ??= (...args) =>
(globalThis.LeadWin.q ??= []).push(args);
</script>
Abrir y cerrar el chat
Con open despliegas el chat. Si indicas una sección, se abre directamente en ella:
- lead: el formulario de contacto. Lo que los visitantes escriben ahí llega a tus solicitudes.
- booking: la reserva de citas. Tiene que estar configurada.
- helpcenter: tu centro de ayuda. Para ello necesitas un centro de ayuda activo de tu base de conocimiento.
- profile: la vista del perfil de tu empresa, a partir de tu perfil.
Si tu agente de LeadWin no ofrece una sección, se abre el chat sin más. close lo cierra y toggle alterna entre abierto y cerrado.
LeadWin('open');
LeadWin('open', { screen: 'lead' });
LeadWin('open', { screen: 'booking' });
LeadWin('close');
LeadWin('toggle');
Añadir botones sin JavaScript
Cualquier elemento con el atributo data-leadwin-open abre el chat al hacer clic. Como valor pones la sección. Sin valor, se abre el chat. Funciona en cualquier CMS, también con elementos que se añaden a la página más tarde, y no necesita ni la estructura básica ni JavaScript propio.
<button data-leadwin-open="lead">Contactar con el equipo</button> <button data-leadwin-open>Abrir el chat</button>
Hacer una pregunta en nombre del visitante
Con ask abres el chat y haces una pregunta al instante, como si la hubiera escrito el visitante. Es útil para botones que siempre llevan la misma pregunta, por ejemplo “¿Cuánto cuesta?”.
- La pregunta tiene de 1 a 1.000 caracteres. Si está vacía o es más larga, no pasa nada.
- Llega a la conversación que el visitante tiene abierta en ese momento. Con newChat: true empieza una nueva.
- Si tu agente de LeadWin está escribiendo una respuesta, el clic se ignora.
- La pregunta es un mensaje normal del visitante. Por eso, una conversación nueva cuenta para tu cupo de conversaciones.
LeadWin('ask', '¿Cuánto cuesta?');
LeadWin('ask', { prompt: '¿Cuánto cuesta?' });
LeadWin('ask', { prompt: '¿Cuánto cuesta?', newChat: true });
Sincronizar el modo oscuro
Cuando tu web cambia entre claro y oscuro, theme cambia también tu agente de LeadWin. Solo funciona si en Apariencia está elegido el tema API. En ese caso, hasta la primera llamada tu agente de LeadWin muestra el diseño claro. La llamada solo afecta al visitante que la provoca. Con auto la restableces.
LeadWin('theme', 'dark');
LeadWin('theme', 'light');
LeadWin('theme', 'auto');
Sincronizar el idioma
En un cambio de página normal, tu agente de LeadWin ya vuelve a leer el idioma indicado en tu página. El comando language solo lo necesitas si los visitantes cambian de idioma sin que la página se recargue. Acepta de, en, fr, nl y es, también con código de país, como de-DE. Solo funcionan los idiomas activados en Idioma. Si el chat está abierto, se recarga en el nuevo idioma y la conversación continúa. Con auto devuelves la decisión al idioma indicado en tu página.
LeadWin('language', 'en');
LeadWin('language', 'auto');
Reaccionar a la apertura
Cuando el chat se abre o se cierra, tu agente de LeadWin lanza en tu página el evento leadwin:panel. event.detail.open contiene true o false. El evento solo llega cuando hay un cambio real, no con cada comando. Se propaga hacia arriba por el documento, así que también puedes escucharlo en window. Así puedes, por ejemplo, ocultar una barra fija o pausar un vídeo mientras el chat está abierto.
document.addEventListener('leadwin:panel', (event) =>
document.body.classList.toggle('leadwin-open', event.detail.open));
Otros comandos y atributos
Estas opciones no aparecen en la página del panel, pero funcionan igual:
- LeadWin('article', 'clave'): abre el chat directamente en un artículo de tu centro de ayuda. Como clave usas el slug de la dirección del artículo o su GUID. Se admiten letras, números, guion y guion bajo, con un máximo de 300 caracteres.
- LeadWin('consent', 'granted'): transmite la decisión de tu banner de cookies. Cómo se relaciona con el consentimiento se explica en Privacidad.
- data-lang: en el código de la instalación, este atributo fija el idioma de la página, por ejemplo data-lang="en". Tiene prioridad sobre el atributo lang de la etiqueta html.
- data-title: en el código de la instalación, este atributo define cómo leen el launcher los lectores de pantalla. Si no lo indicas, se llama Chat.
Los dos atributos van en la etiqueta script de apertura, la que ya contiene data-key.
Qué incluye tu suscripción
La API de JavaScript está disponible en todas las suscripciones, de Free a Scale. Lo que puede abrir un comando depende de lo que incluye tu suscripción: la reserva de citas está disponible desde Basic y el centro de ayuda propio desde Pro. El tema API está en todas las suscripciones. Con Feedbax Business se aplican los límites de Basic, con Premium los de Pro y con Enterprise los de Scale. Más información en LeadWin en la suscripción de Feedbax.
Preguntas frecuentes
¿Cómo hago que mi botón Contacto abra el formulario de LeadWin?
Añade al botón el atributo data-leadwin-open="lead". No necesitas JavaScript propio.
¿Un botón puede abrir directamente la reserva de citas?
Sí, con data-leadwin-open="booking" o LeadWin('open', { screen: 'booking' }). La reserva de citas tiene que estar configurada; si no, se abre el chat.
Mi web tiene modo oscuro. ¿Cómo hago que el chat lo siga?
En Apariencia, pon el tema en API y llama a LeadWin('theme', 'dark') o LeadWin('theme', 'light') en cuanto tu web cambie de modo.
LeadWin('theme', 'dark') no hace nada. ¿Por qué?
El tema no está en API. El comando solo funciona en ese caso.
¿Necesito la estructura básica?
Solo si tu propio JavaScript llama a LeadWin, posiblemente antes de que tu agente de LeadWin se haya cargado. Para los botones con data-leadwin-open, no.
¿Puedo reaccionar cuando se abre el chat?
Sí. Escucha el evento leadwin:panel y lee event.detail.open.
¿Puedo enviar una pregunta en nombre del visitante?
Sí, con LeadWin('ask', 'Tu pregunta') y hasta 1.000 caracteres. La pregunta llega a la conversación abierta, salvo que añadas newChat: true.
¿Funciona LeadWin('language', 'fr') si el francés no está activado?
No. El comando solo acepta idiomas activados en Idioma.