Попап и плавающая кнопка 1.3+
Виджет встраивания показывает квиз в модальном окне поверх любой страницы: по клику на плавающую кнопку, автоматически по таймеру, при попытке уйти со страницы или по клику на вашу собственную кнопку.
Как включить
- Откройте панель «Встраивание: попап и кнопка» в редакторе квиза и настройте триггеры (таблица ниже).
- Скопируйте готовый шорткод
[elder_quiz_widget name="…"]— кнопка «Копировать» рядом. - Вставьте шорткод на страницу (или добавьте блок «Квиз eLDeR» с переключателем «Открывать попапом»). Квиз отрендерится скрытым и откроется по триггерам.
Кнопка в месте вставки 1.4.4+
Попап можно открывать обычной кнопкой прямо в потоке контента — там, где вставлен шорткод или блок:
- Шорткод:
[elder_quiz_widget name="…" button="Пройти тест"]— атрибутbuttonзадаёт текст; при непустом тексте плавающая кнопка из настроек квиза не выводится (автооткрытие, exit-intent и свой селектор продолжают работать). - Блок Gutenberg / виджет Elementor: при включённом «Открывать попапом» появляется поле «Текст кнопки» (по умолчанию «Пройти тест»). Очистите поле — вернётся плавающая кнопка из настроек квиза.
Ширина и положение кнопки 1.4.5+
- Ширина — по содержимому (по умолчанию), 1/4, 1/2, 3/4 или во всю ширину контейнера: селект «Ширина кнопки» в блоке/Elementor или атрибут
button_width="25|50|75|100"у шорткода. - Положение — слева (по умолчанию), по центру или справа: селект «Положение кнопки» или атрибут
button_align="left|center|right".
Цвет и градиент кнопки 1.4.6+
- Цвет кнопки — палитра в настройках блока/Elementor или атрибут
button_color="#0f766e"(hex). Пусто — основной цвет квиза. - Второй цвет (градиент) — задайте оба цвета, и фон кнопки станет градиентом 135° от первого ко второму:
button_color2="#0369a1". - Цвет текста кнопки 1.4.7+ — атрибут
button_text_color="#fde047"или палитра «Цвет текста кнопки» в блоке/Elementor. Пусто — белый.
[elder_quiz_widget name="quiz-kitchen" button="Рассчитать стоимость"
button_width="50" button_align="center"
button_color="#0f766e" button_color2="#0369a1"
button_text_color="#fde047"]Триггеры открытия
| Настройка | Описание |
|---|---|
| Постоянная кнопка | Нет — открытие только по остальным триггерам; плавающая кнопка в углу экрана; вкладка — вертикальный «язычок» у края. Текст и сторона (справа/слева) настраиваются. |
| Автооткрытие, сек | Попап откроется через N секунд после загрузки страницы. 0 — выключено. |
| Exit-intent | Открытие, когда курсор уходит за верхнюю границу окна — посетитель собрался закрыть вкладку. На сенсорных экранах не срабатывает. |
| CSS-селектор своих кнопок | Например, .open-quiz: клик по любому элементу с этим классом откроет попап. Так квиз вешается на любые кнопки лендинга. |
| Не повторять автооткрытия | Таймер и exit-intent срабатывают один раз за вкладку; ручные клики работают всегда. |
Поведение попапа
- Модальное окно доступно: Esc и клик по подложке закрывают, фокус переходит на кнопку «Закрыть», прокрутка страницы блокируется.
- Квиз внутри — обычное прохождение со всеми механиками (скидка, форма, результат).
Ограничения
- Работает на страницах этого сайта WordPress. Кода для вставки на чужие сайты нет — сознательно, из соображений безопасности.
- Ошибочный CSS-селектор молча игнорируется.
- Один и тот же квиз можно поставить на страницу и обычным шорткодом, и виджетом — это будут два независимых прохождения.