Главная Инструкции Как встроить квиз в тело сайта?

Как встроить квиз в тело сайта

Чтобы квиз отображался прямо на странице (без кнопки, открывающей всплывающее окно), выберите в «Публикации» вариант «Блок в странице».
Когда пригодится
Блок подходит, когда квиз — главное действие на странице: посадочная под рекламу, раздел «Рассчитать стоимость», страница услуги. Посетитель видит первый вопрос сразу, без кнопки и всплывающего окна, а квиз выглядит частью сайта.
Откройте «Публикация» → «На сайт» → «Блок в странице»
Откройте квиз → вкладка «Публикация» → под-вкладка «На сайт». В шаге «Где проходит квиз» выберите «Блок в странице». Там же задайте «Высоту блока» (пусто — по размеру экрана), «На всю ширину» на каких устройствах показывать («Показывать на» — компьютере / телефоне) и как блок выглядит «На телефоне»: «Блок» или «Кнопка вместо блока» (откроет квиз окном).
«Блок в странице» и его настройки во вкладке «Публикация» → «На сайт»
Поставьте код LeadForms на сайт
Откройте блок «Код на сайте» и скопируйте код. Вставьте его один раз на все страницы сайта — перед закрывающим тегом </body>. Код один на весь сайт: если он уже стоит, этот шаг пропустите.
<script async src="https://script.leadforms.ru/v1.js" data-key="ВАШ_КЛЮЧ"></script>
Блок «Код на сайте» во вкладке «Публикация» → «На сайт»
Вставьте код блока в нужное место страницы
Там, где должен отображаться квиз, вставьте короткий код блока. Вместо ID подставьте номер вашего квиза — тот же, что в прямой ссылке https://quiz.leadforms.ru/ID.
<div data-leadforms-block="ID"></div>
Опубликуйте квиз
Нажмите «Опубликовать» внизу вкладки «Публикация» — без этого изменения в «Публикации» на сайт не попадут. Чтобы убедиться, что всё стоит, нажмите «Проверить страницу» и введите адрес страницы: личный кабинет покажет, найден ли код и блок.
Готово
Квиз будет встроен в контент страницы там, где стоит код блока. На телефоне — так, как выбрано в настройке «На телефоне».
Если квиз уже стоит на сайте старым кодом — он продолжает работать, но новые способы показа и виджеты появятся только с новым кодом. Что заменить, покажет «Гайд по переходу» в личном кабинете.
Частые вопросы
В элемент, который принимает HTML: в Tilda — блок «HTML-код» (T123), в WordPress — блок «Произвольный HTML», в 1С-Битрикс — визуальный редактор в режиме «Код». В других конструкторах ищите элемент «HTML» или «Код». Пошагово — в инструкциях для Тильды и WordPress.
Блоки, которые появляются после загрузки страницы, подхватываются сами. Если блок всё же не отрисовался, вызовите window.Leadforms.refresh(). Подробнее — в инструкциях для React и Vue.
Да. Блок показывается везде, где вставлен его код, — вставьте <div data-leadforms-block="ID"></div> на каждую нужную страницу. Код LeadForms при этом должен стоять на всех этих страницах, а настройки блока в «Публикации» общие для всех мест.

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

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