Как встроить квиз LanderLab на другую страницу

• использовать один и тот же квиз на нескольких лендингах, не создавая его заново;
• добавить квиз на уже опубликованный лендинг;
• показать квиз LanderLab на сайте, созданном вне LanderLab.

​

Как это работает

​

Пошаговая инструкция

1

Создайте пустой лендинг для квиза

• Перейдите в Landing Pages и нажмите Create Landing Page
• Нажмите Create From Template
• Выберите Blank Template и нажмите Use Template
• Дайте странице понятное название (например, Quiz - Embed) и нажмите Create Landing Page

Подробнее — в статье Создание лендинга с нуля.

2

Добавьте элемент Quiz

• В редакторе нажмите + (Add Elements) в левом верхнем углу
• В разделе Lead Capture нажмите Quiz, чтобы добавить его на страницу

Оставьте на этой странице только квиз. Всё остальное, что вы сюда добавите (заголовки, изображения, футер), тоже появится во встроенном блоке.

3

Создайте квиз

• Выберите Create From Scratch, чтобы собрать квиз самостоятельно, или Create From Template, чтобы начать с готового квиза. Также можно описать квиз в поле ввода и создать его с помощью ИИ.
• Добавьте и настройте шаги в конструкторе квиза
• Нажмите Update, чтобы сохранить квиз

Подробнее — в статье Создание квизов с нуля.

4

Опубликуйте страницу с квизом

• Нажмите Publish в правом верхнем углу редактора
• Выберите Domain и Path, затем нажмите Publish Landing Page
• Скопируйте рабочий URL страницы (например, https://yourdomain.com/quiz). Он понадобится для кода встраивания.

5

Добавьте элемент Custom Code на лендинг

• Откройте в редакторе лендинг, на котором должен появиться квиз
• Нажмите + (Add Elements) и в разделе Engagement выберите Custom Code
• Переместите элемент туда, где должен отображаться квиз
• Выделив элемент, нажмите Edit Custom Code в правой панели

6

Вставьте код встраивания

Вставьте этот код в окно Edit Code и замените значение src на URL опубликованной страницы с квизом:

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

Нажмите Save, чтобы закрыть окно.

7

Сохраните, проверьте и опубликуйте лендинг

• Нажмите Save в редакторе
• Нажмите значок Preview (глаз), чтобы проверить квиз. Элемент Custom Code не отображается в редакторе, поэтому квиз виден только в режиме предпросмотра и на опубликованной странице.
• Опубликуйте или опубликуйте повторно лендинг, чтобы изменения вступили в силу

​

Результат

​

Настройка встраивания

• Высота: измените height="600" под самый высокий шаг квиза. Если шаг выше рамки, посетители увидят полосу прокрутки внутри квиза.
• Мобильные устройства: проверьте лендинг на телефоне — там шаги квиза обычно выше — и при необходимости увеличьте высоту.
• Ширина: квиз занимает всю ширину контейнера. Чтобы сделать его уже и выровнять по центру, измените стиль внешнего <div> на 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>

​

Встраивание квиза вне LanderLab

​

Важные замечания

• Лиды сохраняются на странице квиза. Квиз работает на пустой странице квиза, поэтому лиды и аналитика записываются на этой странице, а не на лендинге, куда вы его встроили.
• Изменения квиза применяются везде. Когда вы редактируете и повторно публикуете страницу квиза, встроенный квиз обновляется на всех лендингах, где он используется. Менять src нужно только при изменении домена или пути страницы квиза.
• Отслеживание работает внутри iframe. Пиксели и параметры URL основного лендинга не передаются во встроенный квиз автоматически. Настройте отслеживание квиза, например событие Lead в Meta Pixel, на самой странице квиза.
• После публикации всегда проверяйте квиз на опубликованном лендинге.