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

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

> Как встроить квиз LanderLab в любой лендинг или сайт: создайте его на пустой странице, опубликуйте и добавьте через iframe в элементе Custom Code.

Квиз LanderLab можно показать внутри другого лендинга или на любом сайте, где разрешён собственный HTML. Для этого создайте квиз на отдельном пустом лендинге и встройте эту страницу через iframe.

Это удобно, когда нужно:

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

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

Вы создаёте пустой лендинг, на котором есть только квиз, и публикуете его. Затем с помощью элемента [**Custom Code**](/ru/features/editor/elements/custom-code) добавляете короткий код iframe на лендинг, где должен появиться квиз. Посетители видят и проходят квиз, не покидая этот лендинг.

***

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

<Steps>
  <Step title="Создайте пустой лендинг для квиза">
    * Перейдите в **Landing Pages** и нажмите **Create Landing Page**
    * Нажмите **Create From Template**
    * Выберите **Blank Template** и нажмите **Use Template**
    * Дайте странице понятное название (например, `Quiz - Embed`) и нажмите **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 в библиотеке шаблонов" width="1373" height="335" data-path="images/embed-quiz-blank-template.png" />
    </Frame>

    Подробнее — в статье [Создание лендинга с нуля](/ru/features/landing-pages/create/from-scratch).
  </Step>

  <Step title="Добавьте элемент Quiz">
    * В редакторе нажмите **+** (Add Elements) в левом верхнем углу
    * В разделе **Lead Capture** нажмите **Quiz**, чтобы добавить его на страницу

    <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 в разделе Lead Capture панели Add Elements" width="1568" height="737" data-path="images/embed-quiz-add-quiz-element.png" />
    </Frame>

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

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

    <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 и Create From Template для нового квиза" 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="Конструктор квиза с кнопкой Update" width="1568" height="737" data-path="images/embed-quiz-builder-update.png" />
    </Frame>

    Подробнее — в статье [Создание квизов с нуля](/ru/features/quizzes/create/from-scratch).
  </Step>

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

    <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="Пустой лендинг только с квизом и кнопкой 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="Окно Publish Your Landing Page с полями Domain и Path" width="1568" height="737" data-path="images/embed-quiz-publish.png" />
    </Frame>
  </Step>

  <Step title="Добавьте элемент Custom Code на лендинг">
    * Откройте в редакторе лендинг, на котором должен появиться квиз
    * Нажмите **+** (Add Elements) и в разделе **Engagement** выберите **Custom Code**
    * Переместите элемент туда, где должен отображаться квиз
    * Выделив элемент, нажмите **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 в разделе Engagement панели 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 на лендинге и кнопка Edit Custom Code" width="1568" height="737" data-path="images/embed-quiz-edit-custom-code.png" />
    </Frame>
  </Step>

  <Step title="Вставьте код встраивания">
    Вставьте этот код в окно **Edit Code** и замените значение `src` на URL опубликованной страницы с квизом:

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

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

    <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 с кодом iframe для квиза" width="1568" height="737" data-path="images/embed-quiz-iframe-code.png" />
    </Frame>
  </Step>

  <Step title="Сохраните, проверьте и опубликуйте лендинг">
    * Нажмите **Save** в редакторе
    * Нажмите значок **Preview** (глаз), чтобы проверить квиз. Элемент Custom Code не отображается в редакторе, поэтому квиз виден только в режиме предпросмотра и на опубликованной странице.
    * [**Опубликуйте**](/ru/features/landing-pages/operations/publish) или [**опубликуйте повторно**](/ru/features/landing-pages/operations/republish) лендинг, чтобы изменения вступили в силу
  </Step>
</Steps>

### Результат

Квиз отображается внутри вашего лендинга без рамки, и посетители могут пройти его, не покидая страницу.

<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="Квиз, встроенный в другой лендинг, в режиме предпросмотра" width="968" height="420" data-path="images/embed-quiz-result.png" />
</Frame>

***

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

* **Высота:** измените `height="600"` под самый высокий шаг квиза. Если шаг выше рамки, посетители увидят полосу прокрутки внутри квиза.
* **Мобильные устройства:** проверьте лендинг на телефоне — там шаги квиза обычно выше — и при необходимости увеличьте высоту.
* **Ширина:** квиз занимает всю ширину контейнера. Чтобы сделать его уже и выровнять по центру, измените стиль внешнего `<div>` на `width:100%;max-width:600px;margin:0 auto;padding:0;`.

<Accordion title="Альтернатива: код встраивания с блоком стилей">
  Если вы встраиваете несколько квизов на одну страницу, можно вынести стили в один блок `<style>` и повторно использовать класс `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>

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

Тот же код встраивания работает на любом сайте или в любом конструкторе страниц, где можно добавить собственный HTML, например в блоке **Custom HTML** в WordPress или элементе **Code Embed** в Webflow. Вставьте туда код и замените значение `src` на URL страницы с квизом.

***

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

* **Лиды сохраняются на странице квиза.** Квиз работает на пустой странице квиза, поэтому лиды и аналитика записываются на этой странице, а не на лендинге, куда вы его встроили.
* **Изменения квиза применяются везде.** Когда вы редактируете и повторно публикуете страницу квиза, встроенный квиз обновляется на всех лендингах, где он используется. Менять `src` нужно только при изменении домена или пути страницы квиза.
* **Отслеживание работает внутри iframe.** Пиксели и параметры URL основного лендинга не передаются во встроенный квиз автоматически. Настройте отслеживание квиза, например [событие Lead в Meta Pixel](/ru/community/quiz/fire-meta-pixel), на самой странице квиза.
* После публикации всегда проверяйте квиз на опубликованном лендинге.


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