Главная Блог Как встроить квиз на сайт: пошаговая инструкция

Как встроить квиз на сайт: пошаговая инструкция

функционал

Квиз готов, но пока он лежит в личном кабинете, заявок с него нет. Осталось поставить его на сайт — это пять–десять минут и два блока кода.

Разберём весь путь: от создания квиза до проверки, что заявки доходят.

Шаг 1. Создайте квиз

В личном кабинете откройте раздел «Квизы» и нажмите «Создать с нуля». Рядом есть и другие варианты: «Создать по шаблону» — готовые сценарии из базы, «Импорт квиза» и «Квиз с ИИ», если нужен черновик под вашу нишу за минуту.

Редактор состоит из четырёх вкладок — «Настройки», «Редактор», «Дизайн» и «Публикация». Внутри «Редактора» идёт пошаговый мастер: стартовая страница → вопросы → форма контактов → результаты → страница «Спасибо». Справа всё время виден живой предпросмотр, его можно переключать между десктопом и мобильным.

Шаг 2. Выберите формат размещения

Откройте вкладку «Публикация» → «На сайт». Форматов два, и выбор между ними — не про красоту, а про то, откуда пойдёт трафик.

  • Кнопка. Квиз открывается в модальном окне по клику. Подходит, когда на странице уже есть свой контент и оффер, а квиз — следующий шаг. Здесь две под-вкладки: «Конструктор» — кнопка собирается прямо в LeadForms, и «Своя кнопка» — квиз вешается на любую вашу кнопку.
  • Блоком на сайт. Квиз встроен прямо в страницу, без всплывающего окна. Подходит для посадочных под рекламу, где квиз и есть основное содержимое. Можно задать ширину, высоту, скругление и отступ, а для мобильных — показывать вместо блока кнопку.

Шаг 3. Скопируйте код

В обоих форматах кода будет два блока, и оба обязательны. Это главное место, где ошибаются: копируют один и ждут, что заработает.

  1. Скрипт инициализации — вставляется перед закрывающим тегом </head>. Он один на страницу, даже если квизов несколько.
  2. Код самого квиза — код кнопки или код блока. Вставляется в то место в теле страницы, где квиз должен появиться.

Если вы выбрали «Свою кнопку», вторым блоком будет не код, а ссылка вида #popup:Leadforms_ID — её нужно прописать в вашу существующую кнопку.

Шаг 4. Вставьте код на свой сайт

Дальше всё зависит от платформы. Готовые разборы со скриншотами:

Отдельно: встраивание квиза в тело страницы и установка через Google Tag Manager, если доступа к коду сайта нет.

Шаг 5. Проверьте, что всё работает

Проверять нужно на опубликованной странице, а не в конструкторе — в предпросмотре платформы код часто не отрабатывает.

  • Квиз открывается по кнопке или виден в блоке.
  • Открывается на телефоне, а не только на десктопе.
  • Форма отправляется и заявка доходит — пройдите квиз до конца сами, с реальным номером.
  • Заявка пришла туда, куда нужно: на почту, в мессенджер или в CRM.

Последний пункт стоит настроить сразу, чтобы заявки не копились в личном кабинете: например, передавать заявки из квиза в amoCRM.

Частые ошибки при встраивании

  • Вставлен только один блок кода. Без скрипта в <head> кнопка не сработает, без второго блока квизу негде появиться.
  • Скрипт продублирован. Если квизов на странице несколько, скрипт всё равно нужен один.
  • Проверка в конструкторе, а не на живой странице. Страницу нужно сначала опубликовать.
  • Квиз стоит ниже первого экрана и его не видно. Если он основной инструмент на посадочной, ему место вверху.
  • Не проверили мобильную версию. Обычно с телефонов приходит большая часть трафика.

Часто задаваемые вопросы

Что выбрать — кнопку или блок?

Блок — если страница создана под квиз и он основное содержимое. Кнопку — если на странице есть свой оффер и контент, а квиз идёт следующим шагом.

Можно ли поставить несколько квизов на одну страницу?

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

Что делать, если нет доступа к коду сайта?

Подойдёт установка через Google Tag Manager. Ещё вариант — не встраивать квиз вовсе, а вести трафик на отдельную страницу с квизом.

Квиз встал, но заявок нет — дело в установке?

Сначала проверьте, доходят ли тестовые заявки. Если доходят, установка ни при чём и причина в самом квизе или трафике — разбор в статье почему трафик на квиз есть, а заявок мало.

Что почитать далее

Была ли эта статья полезной?

Остались вопросы? Напишите нам

Имя *
* Обязательно к заполнению
e-mail *
* Обязательно к заполнению
Сообщение
Напишите нам!
Ответим в течение 30 секунд