Виджет квиза на сайт

Чтобы вставить квиз на сайт, скопируйте готовый код из конструктора после публикации. Есть два варианта: плавающая кнопка-виджет в углу экрана и квиз прямо в блоке страницы. Заявки в обоих случаях попадают в кабинет.

Как вставить квиз на сайт

1. Опубликуйте квиз в кабинете.
2. Скопируйте код — widget.js (кнопка) или embed.js (блок на странице).
3. Вставьте скрипт в HTML сайта. В CMS обычно нужен блок «HTML» или Custom code.
4. Откройте тестовую страницу, пройдите квиз до формы и проверьте, что лид появился в разделе «Лиды».

Код в конструкторе генерируется автоматически: подставляются public id, цвет темы и текст кнопки.

Плавающая кнопка (widget.js)

Кнопка в углу экрана открывает квиз в модальном окне — удобно, если не хотите менять вёрстку сайта.

<script src="https://quizai.pro/widget.js"
  data-quiz="ВАШ_PUBLIC_ID"
  data-color="#5cb85c"
  data-label="Подбор квартиры"
  data-delay="500"
  async>
</script>

Настройки кнопки в конструкторе

С подзаголовком кнопка в две строки: сверху мелко заголовок, ниже крупно подзаголовок. Такой формат «действие + выгода» обычно лучше конвертирует, чем одна строка.

Автооткрытие срабатывает один раз за визит и только если посетитель сам не открыл квиз и не скрыл кнопку крестиком. Код вставляется на сайт один раз. При загрузке страницы кнопка сама берёт тексты, цвет, задержку и автооткрытие из опубликованного квиза, поэтому после изменения настроек достаточно обновить публикацию: кнопка на сайте поменяется в течение минуты. Атрибуты data-label, data-sublabel, data-color, data-delay и data-auto-open в коде нужны только на случай, если сервис недоступен. Если снять квиз с публикации, кнопка на сайте пропадёт.

Дополнительные атрибуты (вручную в коде)

Поведение виджета

• Закрытие по ×, Escape или клику вне окна.
• На мобильных при длинном квизе — скролл внутри окна.
• Крестик на самой кнопке скрывает её до конца сессии (вкладки).
• Анимация появления; при prefers-reduced-motion — без анимации.

Квиз внутри страницы (embed.js)

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

<script src="https://quizai.pro/embed.js" data-quiz="ВАШ_PUBLIC_ID"></script>

Особенности:

• Высота iframe подстраивается автоматически под содержимое.
• Квиз открывается с параметром ?embed=1 (упрощённая оболочка без лишних элементов).

Цели в Яндекс Метрике сайта

Квиз может отправлять цели в счётчик Метрики того сайта, на котором стоит. Работает и с кнопкой, и с блоком; код вставки менять не нужно.

1. В конструкторе откройте раздел «Цели Метрики» и укажите номер счётчика.
2. Проверьте идентификаторы целей. По умолчанию:
   • quizai_start — посетитель нажал кнопку на стартовом экране или ответил на первый вопрос;
   • quizai_submit — заявка отправлена и сохранена.
3. В Метрике создайте цели типа «JavaScript-событие» с теми же идентификаторами.
4. Обновите публикацию квиза.

Каждая цель отправляется один раз за прохождение. По прямой ссылке на квиз цели не отправляются: на странице quizai.pro нет счётчика вашего сайта.

Переход с другого конструктора. Если реклама в Директе оптимизируется по цели старого квиза, впишите идентификатор этой цели в поле «Цель «отправил заявку»». Цель продолжит срабатывать, и статистика по ней не прервётся.

Для своих скриптов на странице появляются события quizai:start и quizai:submit, в event.detail.quizId — public id квиза. Данные посетителя в события не передаются.

Какой способ выбрать

Требования

• Квиз должен быть опубликован.
• Сайт должен позволять подключение внешнего <script> (некоторые CMS — через блок HTML/Custom code).

Проверка

1. Вставьте код на тестовую страницу.
2. Пройдите квиз до отправки формы.
3. Убедитесь, что лид появился в кабинете.