Cómo agregar el quiz a una aplicación React

Abre «Publicación» en el editor del quiz y elige el formato

Elige la ubicación «En la web» y, debajo, cómo aparecerá el quiz: botón, bloque, widget, banner o apertura automática.

Pestaña «Publicación» de LeadForms: modo «En la web» y elección del tipo de instalación

Copia el código de inicialización

Pulsa «Copiar» debajo del código del bloque <head>. Ese script basta una vez para toda la aplicación: no hay que ponerlo en cada componente.

Código de inicialización de LeadForms para pegar en el bloque head, con el botón «Copiar»

Pega el script en index.html

Dó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 en <head>, antes de </head>.

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>

    <!-- Leadforms script start -->
    <!-- pega aquí el código copiado -->
    <!-- Leadforms script end -->
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></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>
        <Script
          id="leadforms"
          src="//script.leadforms.ru/v1.js"
          strategy="afterInteractive"
          onLoad={initQuiz}
        />
        {props.children}
      </body>
    </html>
  )
}

La función initQuiz llama a window.Leadforms.init con los mismos parámetros que el código copiado: el id de tu quiz y autoOpen.

Abre el quiz desde tu propio botón

Lo más simple en React es poner un manejador en el botón. El método Leadforms.showModal recibe el ID de tu quiz.

function QuizButton() {
  function openQuiz() {
    if (window.Leadforms) {
      window.Leadforms.showModal('8233')
    }
  }

  return (
    <button type="button" onClick={openQuiz}>
      Hacer el test
    </button>
  )
}

En lugar de 8233 pon el ID de tu quiz: aparece en el código de inicialización, en el campo id.

La opción con enlace

El quiz también se abre con un enlace normal cuya dirección sea #popup:Leadforms_ID:

<a href="#popup: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

El código de la pestaña «Publicación» contiene <script> , así que pegarlo en el JSX no sirve de nada. En su lugar pon un contenedor y llama a Leadforms.add en el useEffect.

import { useEffect } from 'react'

const QUIZ_ID = '8233'

function QuizBlock() {
  useEffect(function () {
    const params = { id: QUIZ_ID, buttonText: 'Hacer el test' }

    function add() {
      window.Leadforms.add(['Button', params])
    }

    if (window.Leadforms) {
      add()
    } else {
      document.addEventListener('leadformsLoaded', add)
      return function () {
        document.removeEventListener('leadformsLoaded', add)
      }
    }
  }, [])

  return <div data-leadforms-id={QUIZ_ID} />
}

La comprobación de window.Leadforms hace falta porque el componente puede montarse antes de que cargue el script del widget.

Cuidado con StrictMode en desarrollo

En React 18 y posteriores, <StrictMode> monta el componente dos veces en desarrollo, así que useEffect se ejecuta dos veces y en la página pueden salir dos botones.
Solo pasa en local; en la compilación de producción no ocurre. Si molesta al depurar, quita temporalmente <StrictMode> en el main.jsx o agrega una bandera que impida llamar a add por segunda vez.

Qué tener en cuenta en una SPA

• El script de inicialización se carga una sola vez, al abrir la aplicación. Al cambiar de ruta no se vuelve a cargar, y eso es lo esperado.
• Si el quiz va como bloque en una ruta concreta, Leadforms.add se llama en el useEffect de ese componente, es decir, cada vez que se entra en esa ruta.
• El botón que usa showModal funciona en cualquier ruta sin hacer nada más.

Cómo agregar el quiz a una aplicación React

¿Te quedan dudas? Escríbenos