ОкоКвиз — квиз для сайта
ОкоКвиз — это виджет для OkoCRM, который позволяет собирать заявки с сайта через интерактивные квизы. Вместо скучной формы «Оставьте заявку» посетитель отвечает на несколько коротких вопросов, оставляет контакты, и вы получаете готовую сделку в воронке OkoCRM — с ответами клиента, UTM-метками и источником.
Эта инструкция расскажет, как собрать первый квиз, разместить его на сайте, настроить дизайн и промо-баннер, и где смотреть собранные заявки.
Что внутри
1. Установка и первый запуск
2. Создание квиза и шагов
3. Конструктор шагов и типы вопросов
4. Условные переходы между шагами
5. Дизайн квиза — 10 готовых макетов и цвета
6. Триггеры показа на сайте — четыре способа
7. Промо-баннер — дополнительный «привлекатор» в углу страницы
8. Прикрепление квиза к своей кнопке на сайте
9. Размещение — получение готового кода для вставки
10. Лиды — просмотр собранных заявок
11. Настройки квиза — ответственный, воронка, теги
12. Публикация и статусы квиза
13. Удаление квиза и файлов
1. Установка и первый запуск
ОкоКвиз устанавливается из магазина приложений OkoCRM, как любой другой виджет. После установки в левом сайдбаре появляется иконка с логотипом ОкоКвиз — это вход на страницу управления квизами.
При первом запуске откроется приветственный экран с кнопкой «Создать первый квиз». Нажмите её и введите название (например, «Подбор автомобиля»). Сразу после создания квиз будет в статусе Черновик — его можно настраивать, но на сайте он ещё не работает.
2. Создание квиза и шагов
После создания квиза открывается рабочая область с 7 вкладками: Квизы, Конструктор, Дизайн, Триггеры, Промо-баннер, Размещение, Лиды, Настройки.
Начните с Конструктора. Слева — список шагов квиза (пока пустой). Справа — редактор выбранного шага. Внизу слева — кнопка + Добавить шаг ▾ с выпадающим меню типов.
Нажмите на неё, выберите нужный тип шага — шаг сразу появится в списке слева и откроется на редактирование справа. Заполните заголовок («Какой тип авто вас интересует?»), при необходимости описание и варианты ответов.
Шаги можно двигать вверх/вниз стрелками в строке шага и удалять крестиком. Порядок определяет, в какой последовательности их увидит респондент.
Последний шаг — всегда «Контактная форма». Без него квиз не сможет создать сделку и контакт в CRM. Добавьте его в конце.
3. Конструктор шагов и типы вопросов
В ОкоКвизе 7 типов шагов — каждый под свою задачу:
Одиночный выбор — список вариантов, можно выбрать только один. Идеально для сегментации («Какой бюджет?», «Какая категория?»). Можно добавить картинки или эмодзи рядом с каждым вариантом.
Множественный выбор — то же самое, но несколько вариантов сразу («Какие функции важны?», «Что нужно дополнительно?»).
Текстовый ответ — свободное поле для ввода. Подойдёт для комментариев, особых пожеланий, точного ответа («Опишите ваш запрос»).
Слайдер — числовой диапазон с ползунком («Бюджет от 0 до 5 млн ₽»). Задаются мин/макс/шаг и опциональный суффикс единицы измерения.
Дата — выбор даты из календаря («Когда планируете покупку?»). Можно ограничить диапазон «не раньше сегодня» или «не позже 2026 года».
Загрузка файла — клиент прикладывает документ, фото или PDF. Файл прикрепляется к сделке. Лимит 20 МБ.
Контактная форма — финальный шаг. Включает имя, телефон и email — можно включить/отключить каждое поле по отдельности. Имя обязательно, телефон и email опциональны, но хотя бы одно из них должно быть заполнено. Телефон проверяется на корректность по стране (Россия, Казахстан, Беларусь, Украина и другие).
Опции с картинками и эмодзи. В типах «Одиночный» и «Множественный» каждому варианту можно добавить картинку (загрузить файлом) или эмодзи (выбрать из встроенной палитры). Это сильно поднимает конверсию — визуальные опции цепляют внимание больше, чем текстовые.
4. Условные переходы между шагами
По умолчанию шаги идут линейно: после первого — второй, после второго — третий. Но можно настроить ветвление: если клиент выбрал X, перейти к шагу 5, если Y — к шагу 7.
Откройте шаг типа «Одиночный» или «Множественный выбор». Под списком опций есть кнопка Условные переходы. Нажмите её, появится форма правила:
— Если ответ = [вариант] — выберите вариант ответа
— Перейти к — выберите целевой шаг (или «Контактная форма» / «Завершить квиз»)
Правил можно добавить сколько угодно. Если ни одно правило не сработало, квиз идёт линейно к следующему шагу по списку.
Пример: на шаге «Что вас интересует?» при ответе «Покупка» переходим к шагу «Какой бюджет?», при ответе «Сервис» — к шагу «Какая модель?», при «Только консультация» — сразу к контактам.
5. Дизайн квиза — 10 готовых макетов и цвета
Откройте вкладку Дизайн. Слева — настройки, справа — живой предпросмотр.
В разделе Макет доступно 10 готовых дизайнов: Минимал, Стекло, Брутал, Софт, Тёмный, Моно, Журнал, Неомофный, Аврора, Поп. Каждый макет уже подобран под свой характер — от строгого Apple-стиля до яркого детского. Кликните на любой — превью сразу обновится.
В разделе Цвета можно переопределить:
Основной цвет (primary) — используется для кнопок, выделенных вариантов, прогресс-бара. По умолчанию синий #3b82f6.
Фон квиза — цвет подложки. Полезно для стиля «Поп» или кастомных корпоративных тонов.
Цвет текста — основной цвет заголовков и надписей.
Рядом с каждым полем есть крестик × — сбрасывает значение на дефолтное (берётся из выбранного макета).
В разделе Финальный экран после сабмита два варианта поведения:
Показать «Спасибо» — стандартный экран. Можно задать свой заголовок и текст («Заявка отправлена, мы свяжемся в течение 5 минут»).
Редирект на URL — после отправки респондент сразу попадает на указанную страницу (например, на «Thank-you page» с пикселями Я.Метрики).
После всех правок нажмите Сохранить дизайн.
6. Триггеры показа на сайте — четыре способа
Откройте вкладку Триггеры. Выберите, как квиз будет открываться на сайте клиента:
Только кнопка — квиз открывается по клику на конкретный элемент с атрибутом data-okoquiz. Подходит для статичных лендингов и кнопок в шапке. Самый ненавязчивый вариант.
Попап по таймеру — автоматически открывается через N секунд после загрузки страницы. Задаётся длительность задержки. Хорошо работает на продающих лендингах.
Попап при выходе (exit-intent) — открывается, когда курсор движется к адресной строке. На мобильных — при быстрой прокрутке вверх после 50% страницы. Включите «Показывать на мобильных», если хотите ловить и их.
Встроенный режим — квиз появляется прямо на странице в указанном блоке (без попапа). Используется, если хотите встроить квиз в контент статьи или посадочную страницу.
Сохраните триггер. На вкладке Размещение код установки автоматически обновится под выбранный режим.
7. Промо-баннер — дополнительный «привлекатор» в углу страницы
Откройте вкладку Промо-баннер. Это маленькая карточка-приглашение в углу сайта клиента, которая работает параллельно с основным триггером. Не заменяет его, а добавляет ещё одну точку контакта.
Включите главным переключателем сверху. Раскроется блок настроек:
Стиль баннера — выберите один из 20 готовых дизайнов: Минимал, Заливка, Градиент, Стекло, Распродажа, Подарок, Премиум, Срочно, Чат, Стикер, Шёлк, Тёмный, Контур, Неон, Бумага, Лента, Бруталист, Глянец, Сияние, Ретро. Каждый — под свою тематику и аудиторию.
Заголовок, Подзаголовок, Текст кнопки — ваш контент. По умолчанию подсказки: «Получите скидку 20%», «Пройдите квиз — подберём решение», «Начать».
Цвет кнопки — цветной picker или галочка «Использовать основной цвет квиза».
Привлечение внимания — сетка из 6 карточек с живыми демо: Нет, Покачивание, Пульсация, Подпрыгивание, Блик, Наклон-волна. Лёгкая анимация раз в 8–15 секунд — чтобы баннер не терялся в периферии зрения. На hover пауза.
Положение на странице — 4 угла на выбор. Отдельно отступ от горизонтальной и вертикальной кромки в пикселях.
Таймер обратного отсчёта — включается отдельно. Задаётся длительность в днях / часах / минутах. Стартует с момента первого показа баннера конкретному пользователю, сохраняется между перезагрузками. При 0:00 замирает.
Разрешить закрыть крестиком — если включено, у баннера появляется кнопка ×. Можно задать срок «не показывать после закрытия N часов». При значении 0 — больше никогда.
Задержка показа — через сколько секунд после загрузки страницы появится баннер.
Форма на мобильных устройствах — на экранах ≤480px баннер автоматически переключается в один из 5 форм: Узкая снизу, Карточка снизу, Узкая сверху, Кнопка-кружок (FAB), По центру. Стиль (цвет, шрифт) сохраняется, меняется только форма и положение. Отдельные отступы для мобильной версии.
Предпросмотр — справа на вкладке. Можно переключать 🖥 Десктоп / 📱 Мобайл — показывает баннер с вашими настройками в реальном времени.
После всех правок нажмите Сохранить промо-баннер.
8. Прикрепление квиза к своей кнопке на сайте
Любая кнопка, ссылка или элемент на сайте клиента может открывать квиз. Достаточно поставить атрибут data-okoquiz="ULID_квиза":
<button data-okoquiz="01kqv12345abcdef">Пройти тест</button>
<a href="#" data-okoquiz="01kqv12345abcdef">Получить расчёт</a>
<div class="my-cta" data-okoquiz="01kqv12345abcdef">Узнать подробнее</div>
Все элементы с таким атрибутом на странице сработают. Можно несколько кнопок одновременно. Скрипт автоматически отслеживает и элементы, добавленные после загрузки (например, через JS).
На странице обязательно должен быть подключён сам лоадер квиза — см. следующий раздел.
Если нет возможности добавить атрибут к нужной кнопке (например, в конструкторе Tilda/Bitrix кнопка собирается шаблоном, а вы не можете её HTML отредактировать) — есть два варианта через короткий JS.
Вариант 1. Найти кнопку по её классу/id и навесить атрибут программно:
<script>
document.querySelectorAll('.my-cta').forEach(function (el) {
el.setAttribute('data-okoquiz', '01kqv12345abcdef');
});
</script>
Скрипт квиза сам подхватит этот атрибут (даже если он появился позже загрузки страницы).
Вариант 2. Открывать квиз по любому своему событию через клик по скрытому элементу-триггеру:
<span id="oq-trigger" data-okoquiz="01kqv12345abcdef" style="display:none"></span>
<script>
// по своему клику
document.querySelector('.my-real-btn').addEventListener('click', function () {
document.getElementById('oq-trigger').click();
});
// по своему событию (например, после прохождения опросника, по скроллу и т.п.)
document.addEventListener('my-event', function () {
document.getElementById('oq-trigger').click();
});
</script>
Так можно открывать квиз по любому пользовательскому событию: после успешной авторизации, по завершению видео, при возврате из корзины и т. д.
9. Размещение — получение готового кода для вставки
Откройте вкладку Размещение. На странице автоматически собран код вставки в зависимости от выбранного триггера.
В общем виде это одна строка:
<script src="https://quiz.okocrm.com/embed.js?ulid=01kqv12345abcdef" async></script>
Скопируйте код и вставьте в любое место HTML сайта (лучше в <body>, ближе к концу). На CMS Tilda, WordPress, Bitrix и других — через стандартный блок «HTML-код».
Если у вас триггер «Только кнопка» — дополнительно поставьте на нужный элемент data-okoquiz="ULID". Если триггер «Встроенный режим» — поставьте data-okoquiz-embed="ULID" на div, куда хотите встроить квиз.
Скрипт работает на любом сайте — не требует никаких настроек на стороне CMS. Стили квиза не пересекаются со стилями вашего сайта.
10. Лиды — просмотр собранных заявок
Откройте вкладку Лиды. Здесь список всех респондентов, которые прошли квиз до конца и оставили контакты.
В каждой строке: имя контакта, имя сделки, источник (UTM), дата сабмита. Клик по строке открывает модальное окно с полным разбором ответов — по каждому шагу видно, что ответил клиент.
Если лидов много, внизу появляются кнопки Назад и Вперёд. На странице 20 лидов.
В карточке самой сделки в OkoCRM (раздел «Сделки») у каждой такой сделки автоматически создаётся примечание со всеми ответами клиента — менеджеру не надо открывать квиз, чтобы понять контекст.
11. Настройки квиза — ответственный, воронка, теги
Откройте вкладку Настройки:
Ответственный по сделке — конкретный пользователь OkoCRM, на которого упадёт сделка от этого квиза. Если не выбран — назначается владелец аккаунта.
Воронка и этап — куда попадает сделка. Сначала выберите воронку, потом этап внутри неё. По умолчанию — первый этап основной воронки.
Теги сделки — набор тегов, которые автоматически вешаются на каждую сделку от этого квиза. Удобно для сегментации в CRM («Источник: квиз», «Кампания: ноябрь»).
Изменения применяются к будущим сделкам, на уже созданные не влияют.
12. Публикация и статусы квиза
У каждого квиза есть один из трёх статусов:
Черновик — квиз ещё не опубликован. На сайте клиента не работает, даже если код установлен — скрипт вернёт ошибку. Используйте этот статус для настройки.
Активен — квиз опубликован и работает на сайте. Респонденты могут проходить, заявки приходят в CRM.
В архиве — квиз снят с публикации, но не удалён. Все собранные ранее лиды сохраняются. На сайте не показывается.
Переключать статус можно в шапке открытого квиза. Кнопка Опубликовать / Снять с публикации / В архив — рядом с названием.
13. Удаление квиза и файлов
Удалить квиз можно из списка квизов (вкладка Квизы) или из шапки открытого квиза — иконка корзины.
При удалении квиза автоматически удаляется всё связанное:
— все шаги и ответы респондентов
— все загруженные респондентами файлы
— все картинки опций, которые админ загружал в конструкторе
Сделки и контакты в CRM остаются — квиз уже сделал свою работу, заявки на месте.
Удаление необратимо. Если боитесь — переведите квиз в статус «В архиве».
Подсказки и частые ошибки
«Квиз не открывается на сайте» — проверьте, что статус квиза «Активен» и что код вставлен в нужное место. Часто причина — опечатка в ULID.
«Заявки не приходят в CRM» — убедитесь, что в конце квиза есть шаг «Контактная форма». Без него сделка не создастся, даже если респондент дошёл до конца.
«Файлы респондентов накапливаются» — ничего делать не надо. При удалении квиза или конкретного лида все связанные файлы удаляются автоматически.
«Хочу разный дизайн на разных страницах» — создайте несколько квизов с разными дизайнами и разместите каждый на своей странице. Один скрипт обслуживает только один ULID.
«Респондент бросил квиз посередине и вернулся» — ничего страшного. Промежуточные ответы сохраняются на 30 дней. Если он откроет квиз ещё раз с того же устройства, продолжит с того же шага.
«Хочу собирать заявки на нескольких языках» — создайте отдельный квиз для каждого языка и разместите на соответствующих страницах сайта.
«UTM-метки теряются» — нет, не теряются. Метки запоминаются в браузере посетителя на 30 дней. Даже если он пришёл с рекламы, побродил по сайту и только потом открыл квиз — метки попадут в сделку.
«Промо-баннер показывается каждый раз, мешает» — включите «Разрешить закрыть крестиком» и задайте срок «не показывать N часов после закрытия». Например, 24 часа — после закрытия баннер не появится сутки.
