Ein LanderLab-Quiz auf einer anderen Seite einbetten

• 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

​

Schritt-für-Schritt-Anleitung

1

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

Weitere Details finden Sie unter Landingpage von Grund auf erstellen.

2

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

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.

3

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

Mehr dazu unter Quiz-Funnels von Grund auf erstellen.

4

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.

5

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

6

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:

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

7

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 Sie den Lander oder veröffentlichen Sie ihn erneut, damit die Änderung live geht

​

Endergebnis

​

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

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

​

Quiz außerhalb von LanderLab einbetten

​

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, direkt auf der Quiz-Seite ein.
• Testen Sie das Quiz nach dem Veröffentlichen immer im Live-Lander.