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

# Ein LanderLab-Quiz auf einer anderen Seite einbetten

> Betten Sie ein LanderLab-Quiz in jeden Lander oder jede Website ein: auf einer leeren Seite erstellen, veröffentlichen und per iframe einfügen.

Sie können ein LanderLab-Quiz in einer anderen Landingpage oder auf jeder Website anzeigen, die eigenes HTML zulässt. Dazu erstellen Sie das Quiz auf einer eigenen leeren Landingpage und betten diese Seite per iframe ein.

Das ist nützlich, wenn Sie:

* Dasselbe Quiz in mehreren Landern verwenden möchten, ohne es neu zu erstellen
* Einem bereits veröffentlichten Lander ein Quiz hinzufügen möchten
* Ein LanderLab-Quiz auf einer Website anzeigen möchten, die nicht mit LanderLab erstellt wurde

### So funktioniert es

Sie erstellen eine leere Landingpage, die nur das Quiz enthält, und veröffentlichen sie. Anschließend fügen Sie mit dem Element [**Custom Code**](/de/features/editor/elements/custom-code) einen kurzen iframe-Code in den Lander ein, in dem das Quiz erscheinen soll. Besucher sehen das Quiz und füllen es aus, ohne diesen Lander zu verlassen.

***

## Schritt-für-Schritt-Anleitung

<Steps>
  <Step title="Leere Landingpage für das Quiz erstellen">
    * Gehen Sie zu **Landing Pages** und klicken Sie auf **Create Landing Page**
    * Klicken Sie auf **Create From Template**
    * Wählen Sie **Blank Template** aus und klicken Sie auf **Use Template**
    * Geben Sie der Seite einen eindeutigen Namen (zum Beispiel `Quiz - Embed`) und klicken Sie auf **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 in der Vorlagenbibliothek ausgewählt" width="1373" height="335" data-path="images/embed-quiz-blank-template.png" />
    </Frame>

    Weitere Details finden Sie unter [Landingpage von Grund auf erstellen](/de/features/landing-pages/create/from-scratch).
  </Step>

  <Step title="Quiz-Element hinzufügen">
    * Klicken Sie im Editor oben links auf **+** (Add Elements)
    * Klicken Sie unter **Lead Capture** auf **Quiz**, um es zur Seite hinzuzufügen

    <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 unter Lead Capture im Panel Add Elements" width="1568" height="737" data-path="images/embed-quiz-add-quiz-element.png" />
    </Frame>

    <Tip>
      Lassen Sie nur das Quiz auf dieser Seite. Alles andere, was Sie hier hinzufügen, etwa Überschriften, Bilder oder Footer, erscheint ebenfalls im eingebetteten Quiz.
    </Tip>
  </Step>

  <Step title="Quiz erstellen">
    * Wählen Sie **Create From Scratch**, um das Quiz selbst zu erstellen, oder **Create From Template**, um mit einem fertigen Quiz zu beginnen. Sie können das Quiz auch im Eingabefeld beschreiben und es mit KI erstellen lassen.
    * Fügen Sie im Quiz-Builder Ihre Schritte hinzu und bearbeiten Sie sie
    * Klicken Sie auf **Update**, um das Quiz zu speichern

    <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="Optionen Create From Scratch und Create From Template für ein neues 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 mit der Schaltfläche Update" width="1568" height="737" data-path="images/embed-quiz-builder-update.png" />
    </Frame>

    Mehr dazu unter [Quiz-Funnels von Grund auf erstellen](/de/features/quizzes/create/from-scratch).
  </Step>

  <Step title="Quiz-Seite veröffentlichen">
    * Klicken Sie oben rechts im Editor auf **Publish**
    * Wählen Sie eine **Domain** und einen **Path** und klicken Sie auf **Publish Landing Page**
    * Kopieren Sie die Live-URL der Seite (zum Beispiel `https://yourdomain.com/quiz`). Sie fügen sie später in den Embed-Code ein.

    <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="Leere Landingpage nur mit dem Quiz und der Schaltfläche 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="Fenster Publish Your Landing Page mit Domain und Path" width="1568" height="737" data-path="images/embed-quiz-publish.png" />
    </Frame>
  </Step>

  <Step title="Custom-Code-Element zum Lander hinzufügen">
    * Öffnen Sie im Editor den Lander, in dem das Quiz erscheinen soll
    * Klicken Sie auf **+** (Add Elements) und unter **Engagement** auf **Custom Code**
    * Verschieben Sie das Element an die Stelle, an der das Quiz erscheinen soll
    * Klicken Sie bei ausgewähltem Element im rechten Panel auf **Edit Custom Code**

    <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 unter Engagement im 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="Custom-Code-Element im Lander mit der Schaltfläche Edit Custom Code" width="1568" height="737" data-path="images/embed-quiz-edit-custom-code.png" />
    </Frame>
  </Step>

  <Step title="Embed-Code einfügen">
    Fügen Sie diesen Code in das Fenster **Edit Code** ein und ersetzen Sie den Wert von `src` durch die URL Ihrer veröffentlichten Quiz-Seite:

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

    Klicken Sie auf **Save**, um das Fenster zu schließen.

    <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="Fenster Edit Code mit dem iframe-Code des Quiz" width="1568" height="737" data-path="images/embed-quiz-iframe-code.png" />
    </Frame>
  </Step>

  <Step title="Lander speichern, prüfen und veröffentlichen">
    * Klicken Sie im Editor auf **Save**
    * Klicken Sie auf das **Preview**-Symbol (Auge), um das Quiz zu prüfen. Das Custom-Code-Element wird im Editor nicht angezeigt, daher sehen Sie das Quiz nur in der Vorschau und auf der Live-Seite.
    * [**Veröffentlichen**](/de/features/landing-pages/operations/publish) Sie den Lander oder [**veröffentlichen Sie ihn erneut**](/de/features/landing-pages/operations/republish), damit die Änderung live geht
  </Step>
</Steps>

### Endergebnis

Das Quiz erscheint jetzt ohne Rahmen in Ihrem Lander, und Besucher können es ausfüllen, ohne die Seite zu verlassen.

<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="In einen anderen Lander eingebettetes Quiz in der Vorschau" width="968" height="420" data-path="images/embed-quiz-result.png" />
</Frame>

***

## Einbettung anpassen

* **Höhe:** Passen Sie `height="600"` an den höchsten Schritt Ihres Quiz an. Ist ein Schritt höher als der Rahmen, sehen Besucher eine Scrollleiste im Quiz.
* **Mobil:** Prüfen Sie den Lander auf dem Smartphone, wo Quiz-Schritte oft höher sind, und erhöhen Sie die Höhe bei Bedarf.
* **Breite:** Das Quiz nutzt die volle Breite seines Containers. Um es schmaler und zentriert anzuzeigen, ändern Sie den Stil des äußeren `<div>` in `width:100%;max-width:600px;margin:0 auto;padding:0;`.

<Accordion title="Alternative: Embed-Code mit Style-Block">
  Wenn Sie mehrere Quizze auf derselben Seite einbetten, können Sie die Stile in einem einzigen `<style>`-Block halten und die Klasse `quiz-embed` wiederverwenden:

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

## Quiz außerhalb von LanderLab einbetten

Derselbe Embed-Code funktioniert auf jeder Website und in jedem Page Builder, der eigenes HTML erlaubt, zum Beispiel in einem **Custom HTML**-Block in WordPress oder einem **Code Embed**-Element in Webflow. Fügen Sie den Code dort ein und ersetzen Sie den Wert von `src` durch die URL Ihrer Quiz-Seite.

***

## Wichtige Hinweise

* **Leads bleiben bei der Quiz-Seite.** Das Quiz läuft auf der leeren Quiz-Seite. Leads und Analysen werden daher auf dieser Seite erfasst, nicht im Lander, in den Sie das Quiz eingebettet haben.
* **Quiz-Änderungen gelten überall.** Wenn Sie die Quiz-Seite bearbeiten und erneut veröffentlichen, wird das eingebettete Quiz in allen Landern aktualisiert, die es verwenden. Ändern Sie `src` nur, wenn Sie Domain oder Pfad der Quiz-Seite ändern.
* **Tracking läuft im iframe.** Pixel und URL-Parameter des einbettenden Landers erreichen das eingebettete Quiz nicht automatisch. Richten Sie das Quiz-Tracking, etwa das [Meta-Pixel-Lead-Event](/de/community/quiz/fire-meta-pixel), direkt auf der Quiz-Seite ein.
* Testen Sie das Quiz nach dem Veröffentlichen immer im Live-Lander.


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