Подключение квизов к сайту

Квизы создаются и редактируются в конструкторе на этой платформе, а на сайте живут только две вещи: скрипт-загрузчик (один на весь сайт) и кнопки или встроенные блоки. Содержимое квизов на сайт не копируется — виджет подгружает его с платформы, поэтому правки квизов применяются без изменения кода сайта.

Шаг 1. Скрипт-загрузчик — один раз на весь сайт

Вставьте перед закрывающим </body> в общий шаблон сайта (для WordPress — footer.php темы или плагин вставки кода):

<script src="https://quiz.ii.vash-ecolog.ru/quiz.js" defer></script>

• Скрипт самодостаточный: без зависимостей и внешних шрифтов, ничего не рендерит, пока посетитель не откроет квиз. Атрибут defer — загрузка не блокирует страницу.
• Ставится один раз — дальше работают все текущие и будущие квизы этого сайта.
• С Envybox не конфликтует: их виджет ловит якоря #showquiz-…, наш — #quiz-….

Шаг 2. Кнопка на странице

Любая ссылка с якорем #quiz-<id> открывает квиз поверх страницы (id виден в конструкторе, в окне «Получить код»):

<a href="#quiz-rasschitat-stoimost">Рассчитать стоимость</a>

• Существующей кнопке достаточно поменять href — стили и вёрстка не важны.
• Прямая ссылка на страницу с якорем (…/page/#quiz-<id>) откроет квиз сразу при загрузке — можно использовать в рассылках и рекламе.
• На одной странице может быть сколько угодно кнопок и разных квизов.

Шаг 3. Квиз, открытый внутри страницы

Если квиз должен быть постоянно виден как обычный блок страницы, вставьте контейнер в нужное место. Скрипт из шага 1 всё равно обязателен:

<div data-quiz="rasschitat-stoimost" data-quiz-title="Рассчитать стоимость"></div>

• data-quiz — id квиза из конструктора.
• Квиз загружается сразу, без кнопки, затем автоматически подстраивает высоту блока.
• На одной странице можно разместить несколько встроенных квизов.
• Встроенный квиз изолирован от стилей сайта; UTM-метки и адрес исходной страницы передаются в заявку так же, как в popup-режиме.

Шаг 4. Проверка

1. Обновите страницу с очисткой кеша (Ctrl+F5). В DevTools → Network должен загрузиться quiz.js со статусом 200.
2. Клик по кнопке — открывается модальное окно квиза.
3. Полное прохождение с отправкой создаёт боевой лид в Битрикс24 (источник «Квиз») — предупредите менеджеров или согласуйте тестовую отправку с администратором платформы.

Несколько сайтов

Скрипт и кнопки одинаковы для всех сайтов. Платформа принимает заявки только с доменов из белого списка; сейчас разрешены:

Для подключения нового сайта попросите администратора платформы добавить домен в белый список (одна строка в конфиге, без деплоя кода сайта). В лиде Битрикса домен сайта подставляется автоматически: «Заявка № N из виджета квизы на сайте <домен>».

Технические детали

• Виджет — IIFE, глобально видим только объект window.QuizWidget (open(id)/close() для программного открытия).
• Стили изолированы префиксом qz-, модалка на z-index: 2147483000.
• Если на сайте настроен CSP: разрешите script-src и connect-src для https://quiz.ii.vash-ecolog.ru. Для встроенного режима добавьте этот же адрес в frame-src.
• Виджет читает UTM-метки страницы, cookie _ga и _ym_uid — они попадают в лид (сквозная аналитика).
• Прогресс прохождения хранится в localStorage и очищается после отправки.
• Заявка уходит POST-запросом на https://quiz.ii.vash-ecolog.ru/api/submit; при недоступности Битрикс24 платформа сохраняет заявку и досылает сама.

Вопросы по платформе — к владельцу конструктора квизов (отдел маркетинга «Ваш Эколог»).