En el editor del quiz abre «Publicación» → «En la web» y configura cómo se muestra
Elige dónde se muestra el quiz (ventana sobre el sitio, panel lateral o bloque en la página) y cómo se abre: por ejemplo, con el botón de LeadForms, con apertura automática o con los enlaces y botones de tu sitio. Después pulsa «Publicar» al final de la pestaña «Publicación»: sin eso, los ajustes no llegan a tu sitio.
Copia el código de LeadForms
Abre el bloque «Código del sitio» y copia el código. Es uno solo para toda la aplicación y carga todos tus quizzes y widgets: no hay que ponerlo en cada componente.
Pega el script en
index.htmlDónde está el archivo: en Vite,
index.html en la raíz del proyecto; en Create React App, public/index.html. Pega el código copiado justo antes de la etiqueta de cierre </body>.Por qué ahí y no dentro de un componente: React no ejecuta las etiquetas
<script> que acaban dentro del JSX, así que ahí el código sencillamente no arranca.<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Mi sitio</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script async src="https://script.leadforms.org/v1.js" data-key="TU_CLAVE"></script>
</body>
</html>Si usas Next.js
En Next.js el archivo
index.html no existe. Carga el script con el componente next/script en el layout raíz, y así llega a todas las páginas:// app/layout.jsx
import Script from 'next/script'
export default function RootLayout(props) {
return (
<html lang="es">
<body>
{props.children}
<Script
src="https://script.leadforms.org/v1.js"
data-key="TU_CLAVE"
strategy="afterInteractive"
/>
</body>
</html>
)
}En lugar de
TU_CLAVE pon la clave del código que copiaste. No hace falta llamar a nada más: los quizzes y widgets se cargan solos.Abre el quiz desde tu propio botón
Lo más simple es agregar a tu botón el atributo
data-leadforms con el ID del quiz. No hace falta escribir ningún manejador:function QuizButton() {
return (
<button type="button" data-leadforms="8233">
Hacer el test
</button>
)
}Si el quiz se tiene que abrir desde tu propio manejador, llama a
Leadforms.open con el ID del quiz:function openQuiz() {
if (window.Leadforms) {
window.Leadforms.open(8233)
}
}En lugar de
8233 pon el ID de tu quiz: es el número del enlace directo https://quiz.leadforms.org/ID.La opción con enlace
El quiz también se abre con un enlace normal cuya dirección sea
#leadforms-ID:<a href="#leadforms-8233">Hacer el test</a>Importante: tiene que ser exactamente
<a>, y no <Link> de React Router ni de Next.js. El enrutador interceptaría la navegación e intentaría buscar una ruta en lugar de pasarle el hash al widget.Si quieres el quiz como bloque dentro de la página
En «Publicación» elige «Bloque en la página» y pon en el marcado del componente un contenedor con el ID del quiz:
function QuizBlock() {
return <div data-leadforms-block="8233" />
}El bloque aparece solo, aunque el componente se monte después de que cargue la página. Si aun así no aparece, llama a
window.Leadforms.refresh() después de montar el componente.Qué tener en cuenta en una SPA
• El código de LeadForms se carga una sola vez, al abrir la aplicación. Al cambiar de ruta no se vuelve a cargar, y eso es lo esperado.
• Los bloques y botones que aparecen al entrar en una ruta se detectan solos. Si algo no aparece, llama a
• El botón con
• Los bloques y botones que aparecen al entrar en una ruta se detectan solos. Si algo no aparece, llama a
window.Leadforms.refresh().• El botón con
data-leadforms y la llamada a Leadforms.open funcionan en cualquier ruta sin hacer nada más.¿No te sale la configuración?
Si algo no funciona, puedes y lo resolvemos contigo.
