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

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

Abre index.html en la raíz del proyecto (en Vite está junto a package.json y en Vue CLI, en la carpeta public) y pega el código copiado en <head>, antes de </head>.

Por qué ahí y no dentro de un componente: Vue no ejecuta las etiquetas <script> dentro de las plantillas, 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="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Abre el quiz desde tu propio botón

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

<template>
  <button type="button" v-on:click="openQuiz">
    Hacer el test
  </button>
</template>

<script setup>
function openQuiz() {
  if (window.Leadforms) {
    window.Leadforms.showModal('8233')
  }
}
</script>

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 <router-link>. Vue Router 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 una plantilla de Vue no sirve de nada. En su lugar pon un contenedor y llama a Leadforms.add cuando el componente ya esté montado.

<template>
  <div data-leadforms-id="8233"></div>
</template>

<script setup>
import { onMounted } from 'vue'

const params = { id: '8233', buttonText: 'Hacer el test' }

onMounted(() => {
  if (window.Leadforms) {
    window.Leadforms.add(['Button', params])
  } else {
    // el script todavía está cargando: el widget recogerá la llamada de la cola
    document.addEventListener('leadformsLoaded', function () {
      window.Leadforms.add(['Button', params])
    })
  }
})
</script>

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

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 onMounted 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 Vue

¿Te quedan dudas? Escríbenos