> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Inserta un quiz de LanderLab en cualquier lander o web: créalo en una página en blanco, publícala y añádela con un iframe en un elemento Custom Code.

Puedes mostrar un quiz de LanderLab dentro de otra landing page, o en cualquier sitio web que acepte HTML personalizado, creando el quiz en su propia landing page en blanco e insertando esa página con un iframe.

Es útil cuando quieres:

* 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

Creas una landing page en blanco que contiene solo el quiz y la publicas. Después añades un pequeño fragmento de iframe con el elemento [**Custom Code**](/es/features/editor/elements/custom-code) en el lander donde quieres que aparezca el quiz. Los visitantes ven y completan el quiz sin salir de ese lander.

***

## Guía paso a paso

<Steps>
  <Step title="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**

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-blank-template.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=bb127d45a323dea7094702d1427e42e6" alt="Blank Template seleccionada en la biblioteca de plantillas" width="1373" height="335" data-path="images/embed-quiz-blank-template.png" />
    </Frame>

    Para más detalles, consulta [Crea una landing page desde cero](/es/features/landing-pages/create/from-scratch).
  </Step>

  <Step title="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

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-add-quiz-element.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=52175814bbcfbe6f55b49fd8e6e85aec" alt="Elemento Quiz en Lead Capture dentro del panel Add Elements" width="1568" height="737" data-path="images/embed-quiz-add-quiz-element.png" />
    </Frame>

    <Tip>
      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.
    </Tip>
  </Step>

  <Step title="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

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-create-quiz.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=343309f5c8c62a6e953dbca86e089347" alt="Opciones Create From Scratch y Create From Template para un quiz nuevo" width="1552" height="721" data-path="images/embed-quiz-create-quiz.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-builder-update.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=5d98c8af438863e2a92761b812fa6652" alt="Editor del quiz con el botón Update" width="1568" height="737" data-path="images/embed-quiz-builder-update.png" />
    </Frame>

    Más información en [Crea embudos de quiz desde cero](/es/features/quizzes/create/from-scratch).
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-blank-page-with-quiz.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=a4b02687042b9f5d68e548acf0eff779" alt="Landing page en blanco con solo el quiz y el botón Publish" width="1568" height="737" data-path="images/embed-quiz-blank-page-with-quiz.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-publish.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=f032b59a5b7f9d5f634faaa3abd10e28" alt="Ventana Publish Your Landing Page con Domain y Path" width="1568" height="737" data-path="images/embed-quiz-publish.png" />
    </Frame>
  </Step>

  <Step title="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

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-custom-code-element.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=1b69b72b514cdf07257fcaecc22a444a" alt="Elemento Custom Code en Engagement dentro del panel Add Elements" width="1568" height="737" data-path="images/embed-quiz-custom-code-element.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-edit-custom-code.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=f44839dff8f85cdfa05cb6f250b73022" alt="Elemento Custom Code en el lander con el botón Edit Custom Code" width="1568" height="737" data-path="images/embed-quiz-edit-custom-code.png" />
    </Frame>
  </Step>

  <Step title="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:

    ```html theme={null}
    <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.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-iframe-code.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=aad18bd0d32bbbde3785ff62d115b6dc" alt="Ventana Edit Code con el código iframe del quiz" width="1568" height="737" data-path="images/embed-quiz-iframe-code.png" />
    </Frame>
  </Step>

  <Step title="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**](/es/features/landing-pages/operations/publish) o [**vuelve a publicar**](/es/features/landing-pages/operations/republish) el lander para que el cambio esté en vivo
  </Step>
</Steps>

### Resultado final

El quiz aparece ahora dentro de tu lander, sin ningún borde alrededor, y los visitantes pueden completarlo sin salir de la página.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-result.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=7da9c6796ad877510fca732823a80187" alt="Quiz insertado en otro lander, visto en Preview" width="968" height="420" data-path="images/embed-quiz-result.png" />
</Frame>

***

## 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;`.

<Accordion title="Alternativa: código de inserción con un bloque de estilos">
  Si insertas varios quizzes en la misma página, puedes mantener los estilos en un único bloque `<style>` y reutilizar la clase `quiz-embed`:

  ```html theme={null}
  <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>
  ```
</Accordion>

## Inserta el quiz fuera de LanderLab

El mismo código de inserción funciona en cualquier sitio web o constructor de páginas que te permita añadir HTML personalizado, como un bloque **Custom HTML** de WordPress o un elemento **Code Embed** de Webflow. Pega ahí el código y sustituye el valor de `src` por la URL de la página de tu quiz.

***

## 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](/es/community/quiz/fire-meta-pixel), en la propia página del quiz.
* Prueba siempre el quiz en el lander publicado después de publicarlo.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.