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.htmlAbre
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 justo antes de la etiqueta de cierre </body>.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>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script async src="https://script.leadforms.org/v1.js" data-key="TU_CLAVE"></script>
</body>
</html>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:<template>
<button type="button" data-leadforms="8233">
Hacer el test
</button>
</template>Si el quiz se tiene que abrir desde tu propio manejador, llama a
Leadforms.open con el ID del quiz:<template>
<button type="button" v-on:click="openQuiz">
Hacer el test
</button>
</template>
<script setup>
function openQuiz() {
if (window.Leadforms) {
window.Leadforms.open(8233)
}
}
</script>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 <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
En «Publicación» elige «Bloque en la página» y pon en la plantilla del componente un contenedor con el ID del quiz:
<template>
<div data-leadforms-block="8233"></div>
</template>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() en onMounted.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.
