Cómo insertar un quiz de LanderLab en otra página

• Reutilizar el mismo quiz en varios landers sin volver a crearlo
• Añadir un quiz a un lander que ya está publicado
• Mostrar un quiz de LanderLab en un sitio web creado fuera de LanderLab

​

Cómo funciona

​

Guía paso a paso

1

Crea una landing page en blanco para el quiz

• Ve a Landing Pages y haz clic en Create Landing Page
• Haz clic en Create From Template
• Selecciona Blank Template y haz clic en Use Template
• Ponle un nombre claro a la página (por ejemplo, Quiz - Embed) y haz clic en Create Landing Page

Para más detalles, consulta Crea una landing page desde cero.

2

Añade el elemento Quiz

• En el editor, haz clic en + (Add Elements) en la esquina superior izquierda
• En Lead Capture, haz clic en Quiz para añadirlo a la página

Deja solo el quiz en esta página. Todo lo demás que añadas aquí, como titulares, imágenes o pies de página, también aparecerá dentro del iframe.

3

Crea tu quiz

• Elige Create From Scratch para crear el quiz tú mismo o Create From Template para partir de un quiz ya hecho. También puedes describir el quiz en el cuadro de texto para crearlo con IA.
• Añade y edita los pasos en el editor del quiz
• Haz clic en Update para guardar el quiz

Más información en Crea embudos de quiz desde cero.

4

Publica la página del quiz

• Haz clic en Publish en la esquina superior derecha del editor
• Elige un Domain y un Path y haz clic en Publish Landing Page
• Copia la URL pública de la página (por ejemplo, https://yourdomain.com/quiz). La pegarás más adelante en el código de inserción.

5

Añade un elemento Custom Code a tu lander

• Abre en el editor el lander donde quieres que aparezca el quiz
• Haz clic en + (Add Elements) y, en Engagement, haz clic en Custom Code
• Mueve el elemento al lugar donde debe aparecer el quiz
• Con el elemento seleccionado, haz clic en Edit Custom Code en el panel derecho

6

Pega el código de inserción

Pega este código en la ventana Edit Code y sustituye el valor de src por la URL de la página publicada de tu quiz:

<div style="width:100%;margin:0;padding:0;">
  <iframe
    src="https://yourdomain.com/your-quiz-page"
    width="100%"
    height="600"
    frameborder="0"
    style="display:block;width:100%;margin:0;padding:0;border:0;outline:0;box-shadow:none;background:transparent;">
  </iframe>
</div>

Haz clic en Save para cerrar la ventana.

7

Guarda, previsualiza y publica el lander

• Haz clic en Save en el editor
• Haz clic en el icono Preview (el ojo) para comprobar el quiz. El elemento Custom Code no se muestra dentro del editor, así que el quiz solo aparece en Preview y en la página publicada.
• Publica o vuelve a publicar el lander para que el cambio esté en vivo

​

Resultado final

​

Personaliza la inserción

• Altura: Cambia height="600" para que se ajuste al paso más alto de tu quiz. Si un paso es más alto que el marco, los visitantes verán una barra de desplazamiento dentro del quiz.
• Móvil: Revisa el lander en el móvil, donde los pasos del quiz suelen ser más altos, y aumenta la altura si hace falta.
• Ancho: El quiz ocupa todo el ancho de su contenedor. Para hacerlo más estrecho y centrado, cambia el estilo del <div> exterior a width:100%;max-width:600px;margin:0 auto;padding:0;.

<style>
  .quiz-embed {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .quiz-embed iframe {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
  }
</style>

<div class="quiz-embed">
  <iframe
    src="https://yourdomain.com/your-quiz-page"
    width="100%"
    height="600"
    frameborder="0">
  </iframe>
</div>

​

Inserta el quiz fuera de LanderLab

​

Notas importantes

• Los leads se quedan en la página del quiz. El quiz se ejecuta en la página en blanco del quiz, así que sus leads y su analítica se registran en esa página, no en el lander donde lo insertaste.
• Los cambios del quiz se aplican en todas partes. Cuando editas y vuelves a publicar la página del quiz, el quiz insertado se actualiza en todos los landers que lo usan. Solo tienes que cambiar el src si cambias el dominio o la ruta de la página del quiz.
• El seguimiento se ejecuta dentro del iframe. Los píxeles y los parámetros de URL del lander anfitrión no llegan automáticamente al quiz insertado. Configura el seguimiento del quiz, como el evento Lead de Meta Pixel, en la propia página del quiz.
• Prueba siempre el quiz en el lander publicado después de publicarlo.