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

# How to Embed a LanderLab Quiz on Another Page

> Embed a LanderLab quiz on any lander or website: build it on a blank page, publish it, then add it with an iframe in a Custom Code element.

You can show a LanderLab quiz inside another landing page, or on any website that accepts custom HTML, by building the quiz on its own blank landing page and embedding that page with an iframe.

This is useful when you want to:

* Reuse the same quiz on several landers without rebuilding it
* Add a quiz to a lander that is already live
* Show a LanderLab quiz on a website built outside LanderLab

### How It Works

You create a blank landing page that contains only the quiz and publish it. Then you add a short iframe snippet with the [**Custom Code**](/features/editor/elements/custom-code) element on the lander where you want the quiz to appear. Visitors see and complete the quiz without leaving that lander.

***

## Step-by-Step Guide

<Steps>
  <Step title="Create a blank landing page for the quiz">
    * Go to **Landing Pages** and click **Create Landing Page**
    * Click **Create From Template**
    * Select **Blank Template** and click **Use Template**
    * Give the page a clear name (for example, `Quiz - Embed`) and click **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 selected in the template library" width="1373" height="335" data-path="images/embed-quiz-blank-template.png" />
    </Frame>

    For more details, see [Create Landing Page from Scratch](/features/landing-pages/create/from-scratch).
  </Step>

  <Step title="Add the Quiz element">
    * In the editor, click **+** (Add Elements) in the top-left corner
    * Under **Lead Capture**, click **Quiz** to add it to the page

    <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="Quiz element under Lead Capture in the Add Elements panel" width="1568" height="737" data-path="images/embed-quiz-add-quiz-element.png" />
    </Frame>

    <Tip>
      Keep only the quiz on this page. Anything else you add here, such as headlines, images, or footers, will also appear inside the embed.
    </Tip>
  </Step>

  <Step title="Build your quiz">
    * Choose **Create From Scratch** to build the quiz yourself, or **Create From Template** to start from a ready-made quiz. You can also describe the quiz in the prompt box to create it with AI.
    * Add and edit your steps in the quiz builder
    * Click **Update** to save the 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="Create From Scratch and Create From Template options for a new quiz" 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="Quiz builder with the Update button" width="1568" height="737" data-path="images/embed-quiz-builder-update.png" />
    </Frame>

    Learn more in [Create Quiz Funnels from Scratch](/features/quizzes/create/from-scratch).
  </Step>

  <Step title="Publish the quiz page">
    * Click **Publish** in the top-right corner of the editor
    * Choose a **Domain** and a **Path**, then click **Publish Landing Page**
    * Copy the live URL of the page (for example, `https://yourdomain.com/quiz`). You will paste it into the embed code later.

    <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="Blank landing page with only the quiz and the Publish button" 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="Publish Your Landing Page window with Domain and Path" width="1568" height="737" data-path="images/embed-quiz-publish.png" />
    </Frame>
  </Step>

  <Step title="Add a Custom Code element to your lander">
    * Open the lander where you want the quiz to appear in the editor
    * Click **+** (Add Elements) and, under **Engagement**, click **Custom Code**
    * Move the element to the spot where the quiz should appear
    * With the element selected, click **Edit Custom Code** in the right panel

    <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="Custom Code element under Engagement in the Add Elements panel" 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="Custom Code element on the lander with the Edit Custom Code button" width="1568" height="737" data-path="images/embed-quiz-edit-custom-code.png" />
    </Frame>
  </Step>

  <Step title="Paste the embed code">
    Paste this code into the **Edit Code** window and replace the `src` value with the URL of your published quiz page:

    ```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>
    ```

    Click **Save** to close the window.

    <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="Edit Code window with the quiz iframe code" width="1568" height="737" data-path="images/embed-quiz-iframe-code.png" />
    </Frame>
  </Step>

  <Step title="Save, preview, and publish the lander">
    * Click **Save** in the editor
    * Click the **Preview** (eye) icon to check the quiz. The Custom Code element does not render inside the editor, so the quiz only shows in Preview and on the live page.
    * [**Publish**](/features/landing-pages/operations/publish) or [**republish**](/features/landing-pages/operations/republish) the lander so the change goes live
  </Step>
</Steps>

### Final Result

The quiz now appears inside your lander with no border around it, and visitors can complete it without leaving the page.

<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 embedded on another lander, shown in Preview" width="968" height="420" data-path="images/embed-quiz-result.png" />
</Frame>

***

## Customize the Embed

* **Height:** Change `height="600"` to fit your tallest quiz step. If a step is taller than the frame, visitors will see a scrollbar inside the quiz.
* **Mobile:** Check the lander on mobile, where quiz steps are often taller, and increase the height if needed.
* **Width:** The quiz fills the full width of its container. To make it narrower and centered, change the style of the outer `<div>` to `width:100%;max-width:600px;margin:0 auto;padding:0;`.

<Accordion title="Alternative: embed code with a style block">
  If you embed several quizzes on the same page, you can keep the styling in one `<style>` block and reuse the `quiz-embed` class:

  ```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>

## Embed the Quiz Outside LanderLab

The same embed code works on any website or page builder that lets you add custom HTML, such as a WordPress **Custom HTML** block or a Webflow **Code Embed** element. Paste the code there and replace the `src` value with your quiz page URL.

***

## Important Notes

* **Leads stay with the quiz page.** The quiz runs on the blank quiz page, so its leads and analytics are recorded on that page, not on the lander where you embedded it.
* **Quiz updates go live everywhere.** When you edit and republish the quiz page, the embedded quiz updates on every lander that uses it. Update the `src` only if you change the quiz page's domain or path.
* **Tracking runs inside the iframe.** Pixels and URL parameters on the host lander do not reach the embedded quiz automatically. Set up quiz tracking, such as the [Meta Pixel Lead event](/community/quiz/fire-meta-pixel), on the quiz page itself.
* Always test the quiz on the live lander after publishing.


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