Inicio Blog Producto Cómo insertar un quiz en tu sitio web: guía paso a paso

Cómo insertar un quiz en tu sitio web: guía paso a paso

producto

El quiz está listo, pero mientras siga en el panel de LeadForms no trae solicitudes. Falta ponerlo en el sitio: son cinco o diez minutos y un solo código que se pega en el sitio una vez.

Vemos todo el camino: desde crear el quiz hasta comprobar que las solicitudes llegan.

Paso 1. Crea el quiz

En el panel de LeadForms abre la sección «Quizzes» y presiona «Crear desde cero». Al lado hay otras opciones: «Crear desde plantilla», con guiones listos de la biblioteca, «Importar quiz» y «Quiz con IA», si necesitas un borrador para tu nicho en un minuto.

El editor tiene cuatro pestañas: «Ajustes», «Editor», «Diseño» y «Publicación». Dentro de «Editor» va un asistente por pasos: pantalla inicial → preguntas → formulario de contacto → resultados → página de «Gracias». A la derecha siempre se ve la vista previa en vivo, que puedes cambiar entre escritorio y móvil.

Paso 2. Pon el código de LeadForms en tu sitio

Abre la pestaña «Publicación» → «En la web» y despliega el bloque «Código del sitio». Ahí está el código listo, con la clave de tu cuenta:

<script async src="https://script.leadforms.org/v1.js" data-key="TU_CLAVE"></script>

Pégalo una sola vez en todas las páginas del sitio: antes de la etiqueta de cierre </body> o en el campo de código para todo el sitio de tu constructor. El código es uno por cuenta y carga todos tus quizzes y widgets. Si ya está puesto, te saltas este paso, y para los siguientes quizzes no hay que cambiarlo.

Paso 3. Elige cómo mostrar el quiz

Ahí mismo, en la pestaña «Publicación» → «En la web», la configuración va en dos pasos.

  • Dónde se muestra el quiz: ventana sobre el sitio, panel lateral o bloque en la página. La ventana y el panel sirven cuando la página ya tiene su propio contenido y su oferta, y el quiz es el siguiente paso. El bloque es para landings de publicidad, donde el quiz es el contenido principal: queda incrustado en la página, sin ventana emergente.
  • Cómo se abre: con el botón de LeadForms, con apertura automática, con un botón en la página, dentro del multibotón o con los enlaces y botones de tu sitio. Para que el quiz se abra desde tu propio botón, ponle el enlace #leadforms-ID, donde ID es el número del quiz, el mismo que aparece en el enlace directo.

Para el bloque en la página, en el lugar donde debe ir el quiz se pega un código corto: <div data-leadforms-block="ID"></div>. Para las demás formas no hay que agregar nada a la página: basta con el código del paso 2.

Después presiona «Publicar» al final de la pestaña. Sin eso, los cambios de «Publicación» no llegan al sitio.

Paso 4. Guías para tu plataforma

Dónde pegar el código depende de la plataforma. Guías listas con capturas:

  • Tilda: con el bloque «Otro/Código HTML». Toma en cuenta que ese bloque solo funciona en los planes de pago de Tilda.
  • WordPress: con el bloque «HTML personalizado».
  • Wix
  • Sitios de Bitrix24
  • Flexbe
  • LPmotor
  • Platforma LP
  • Taplink

Aparte: incrustar el quiz en el cuerpo de la página y la instalación con Google Tag Manager, si no tienes acceso al código del sitio.

Paso 5. Comprueba que todo funciona

Hay que comprobarlo en la página publicada y no en el constructor: en la vista previa de la plataforma el código muchas veces no se ejecuta. En el panel, en el bloque «Código del sitio», está el botón «Verificar página»: escribe la dirección y LeadForms te muestra si encontró el código en ella.

  • El quiz se abre con el botón o se ve dentro del bloque.
  • Se abre en el teléfono, no solo en escritorio.
  • El formulario se envía y la solicitud llega: haz el quiz completo tú mismo, con un número real.
  • La solicitud llegó a donde debía: al correo, al mensajero o al CRM.

Conviene configurar este último punto desde el inicio, para que las solicitudes no se acumulen en el panel de LeadForms: por ejemplo, enviar los leads del quiz a Kommo (antes amoCRM).

Errores frecuentes al incrustar

  • No se presionó «Publicar». La forma de mostrar el quiz está elegida, pero sin el botón al final de la pestaña «Publicación» no llega al sitio.
  • El código está duplicado. El código de LeadForms va uno solo para todo el sitio, aunque tengas varios quizzes y widgets.
  • La prueba se hizo en el constructor y no en la página real. Primero hay que publicar la página.
  • El quiz quedó debajo de la primera pantalla y no se ve. Si es la herramienta principal de la landing, su lugar es arriba.
  • No se revisó la versión móvil. Normalmente la mayor parte del tráfico llega desde el teléfono.

El código para pegar te lo da el constructor de quizzes LeadForms en la pestaña «Publicación»: solo falta ponerlo en el sitio y elegir cómo mostrar el quiz.

Preguntas frecuentes

¿Qué elijo, ventana con botón o bloque en la página?

Bloque en la página, si la página se hizo para el quiz y él es el contenido principal. Ventana o panel con botón, si la página tiene su propia oferta y su contenido, y el quiz va como siguiente paso.

¿Se pueden poner varios quizzes en una misma página?

Sí. El código de LeadForms en el sitio sigue siendo uno, y la forma de mostrar el quiz se configura aparte para cada quiz. Para los bloques en la página, cada quiz tiene su propio código corto con su número.

¿Qué hago si no tengo acceso al código del sitio?

Sirve la instalación con Google Tag Manager. Otra opción es no incrustar el quiz y llevar el tráfico a una página aparte con el quiz.

El quiz ya está puesto pero no hay solicitudes, ¿es por la instalación?

Primero comprueba si llegan las solicitudes de prueba. Si llegan, la instalación no tiene la culpa y el motivo está en el quiz mismo o en el tráfico: lo vemos en el artículo por qué hay tráfico en el quiz y pocas solicitudes.

Qué leer después

Crea un quiz para tu negocio
Toma una plantilla lista o genera el quiz con IA a partir de la descripción de tu tarea: los primeros 20 leads son gratis.
Crear un quiz Ver plantillas

¿Te resultó útil este artículo?

¿Te quedan dudas? Escríbenos

Nombre *
* Campo obligatorio
Correo electrónico *
* Campo obligatorio
Mensaje
¡Escríbenos!
Respondemos en 30 segundos