Inicio Blog 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 dos bloques de código.

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. Elige el formato de colocación

Abre la pestaña «Publicación» → «En el sitio». Hay dos formatos, y elegir entre ellos no es cuestión de estética, sino de por dónde va a llegar el tráfico.

  • Botón. El quiz se abre en una ventana modal al hacer clic. Sirve cuando la página ya tiene su propio contenido y su oferta, y el quiz es el siguiente paso. Aquí hay dos sub-pestañas: «Constructor», donde el botón se arma dentro de LeadForms, y «Botón propio», donde el quiz se cuelga de cualquier botón tuyo.
  • Como bloque en el sitio. El quiz queda incrustado en la página, sin ventana emergente. Sirve para landings de publicidad, donde el quiz es el contenido principal. Puedes definir ancho, alto, redondeo y margen, y en móviles mostrar un botón en lugar del bloque.

Paso 3. Copia el código

En los dos formatos el código son dos bloques, y los dos son obligatorios. Es el punto donde más se equivocan: copian uno y esperan que funcione.

  1. El script de inicialización se pega antes de la etiqueta de cierre </head>. Va uno solo por página, aunque tengas varios quizzes.
  2. El código del quiz en sí: el del botón o el del bloque. Se pega en el lugar del cuerpo de la página donde debe aparecer el quiz.

Si elegiste «Botón propio», el segundo bloque no es código, sino un enlace del tipo #popup:Leadforms_ID, que hay que poner en tu botón existente.

Paso 4. Pega el código en tu sitio

De aquí en adelante todo 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: en el editor de la entrada hay que cambiar al modo «Texto».
  • 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.

  • 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

  • Se pegó solo un bloque de código. Sin el script en el <head> el botón no funciona; sin el segundo bloque el quiz no tiene dónde aparecer.
  • El script está duplicado. Si en la página hay varios quizzes, el script sigue siendo uno solo.
  • 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.

Preguntas frecuentes

¿Qué elijo, botón o bloque?

Bloque, si la página se hizo para el quiz y él es el contenido principal. 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 script de inicialización sigue siendo uno, y el código del botón o del bloque va propio para cada quiz.

¿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

¿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