В разработке · 2026
QuizKodrun: платформа виджетов, заявок и чатов
QuizKodrun объединяет полный путь от привязки сайта и сборки виджета до публикации, заявки и рабочего диалога с клиентом. В кейсе отдельно показаны действующие модули и направления развития: готовые возможности не смешиваются с экспериментальными виджетами
23 уникальных продуктовых экрана
Конструкторы, модули и опубликованные виджеты
Галерея собрана из реальных экранов разработки и QA. Здесь показан полный путь внутри приложения; экспериментальные игровые модули подписаны как направления развития, а не как готовые функции
ПриложениеПроект отделяет данные одного бизнеса от другого. Внутри него создаются сайты, виджеты, заявки, диалоги и настройки доступа, поэтому пользователь может вести несколько направлений в одном аккаунте без смешения данных
Описание экранов
- Проекты как рабочие пространства
Проект отделяет данные одного бизнеса от другого. Внутри него создаются сайты, виджеты, заявки, диалоги и настройки доступа, поэтому пользователь может вести несколько направлений в одном аккаунте без смешения данных
- Привязка сайта и домена
Сайт задаёт разрешённый домен для публикации и связывает установленные виджеты с конкретным веб‑ресурсом. Пользователь указывает название, URL, тип сайта и внутреннюю заметку — без ручного редактирования конфигурации
- Единый центр всех виджетов
Квизы, чаты, генераторы клиентов и мультикнопки находятся в одном рабочем списке. Здесь видны тип, сайт, публикационный статус, сигналы и быстрые действия: предпросмотр, код установки, запуск, ссылка и редактирование
- Выбор рабочего сценария
Создание начинается не с технических терминов, а с задачи бизнеса. Пользователь выбирает квиз, онлайн‑чат, генератор клиентов или мультикнопку; после этого приложение открывает специализированный конструктор выбранного типа
- Простой редактор квиза
Режим для быстрого запуска ведёт по понятным разделам: старт, вопросы, контакты, финальный экран, внешний вид и установка. Центральный холст показывает результат, а состояние каждого шага помогает не пропустить обязательную часть сценария
- Визуальный Pro‑конструктор
Расширенный режим даёт контроль над областями, контейнерами, блоками, размерами холста, отступами, выравниванием и адаптивными состояниями. Слева находится структура, в центре — живой холст, справа — свойства выбранной области или элемента
- Типы вопросов и логика ответа
Конструктор поддерживает одиночный и множественный выбор, текстовые поля, шкалы, рейтинги и составные формы. Для каждого вопроса настраиваются обязательность, варианты, переходы и визуальное расположение без изменения кода runtime
- Старт с шаблона или с нуля
Перед открытием редактора можно взять чистую схему либо готовый отраслевой сценарий. Карточки показывают внешний вид, назначение, число вопросов и примерное время прохождения; любой шаблон остаётся полностью редактируемым
- Предпросмотр на разных устройствах
Шаблон можно проверить в desktop, tablet и mobile‑режимах, а для мобильного устройства — в портретной и альбомной ориентации. Фон сайта имитирует реальное окружение и помогает заметить проблемы до публикации
- Опубликованный пользовательский квиз
Это уже не редактор, а публичный runtime: посетитель видит брендированный первый экран, проходит вопросы и оставляет контакт. Один и тот же сценарий может открываться поверх сайта или работать как отдельная страница
- Три способа установки
Квиз запускается по кнопке, встраивается внутрь выбранного контейнера страницы или открывается автоматически. Для автопоказа задаются задержка, частота и правила закрытия; для встроенного режима — CSS‑контейнер и высота блока
- Черновик квиза с помощью AI
Модель получает URL или описание ниши, цель, аудиторию и ограничения, затем предлагает структуру вопросов и экранов. Результат не публикуется автоматически: он попадает в обычный конструктор и остаётся под контролем пользователя
- Конструктор онлайн‑чата
Отдельные разделы управляют общим поведением, кнопкой открытия, окном переписки и формой контактов. Справа меняются цвета, типографика и правила показа, в центре сразу виден результат на клиентской стороне
- Шаблоны чата для разных ниш
Системные шаблоны задают стартовую композицию, цвета и тон общения для продаж, услуг, недвижимости и премиального сервиса. После выбора пользователь меняет все параметры в редакторе под свой бренд
- Живой диалог на стороне клиента
Публичный виджет показывает историю сообщений, статус поддержки и поле ввода. Сообщение посетителя создаёт диалог в операторском контуре; WebSocket доставляет события в реальном времени, а резервный опрос страхует нестабильное соединение
- Генератор клиентов
Мини‑кампания сочетает оффер, визуальный блок, таймер и форму контакта. В редакторе отдельно задаются содержимое, внешний вид, показ на мобильных устройствах и публикация — подход подходит для акции без длинного квиза
- Мультикнопка каналов связи
Одна плавающая кнопка раскрывает телефон, чат, квиз, обратный звонок, WhatsApp, Telegram и любые ссылки. Пользователь управляет порядком каналов, подписями, цветами, иконкой открытия и страницами показа
- Заявки и контекст источника
В рабочую очередь попадают контакты из разных виджетов. Таблица сохраняет дату, сайт, тип и название источника, ответы, контакт, ответственного и статус; фильтры и экспорт помогают использовать данные вне платформы
- Каталог модулей и направления развития
Экран фиксирует целевую систему типов: чат, popup, обратный звонок, мультикнопка и игровые механики. В текущей версии доступность ограничена четырьмя публичными типами; остальные элементы этого каталога рассматриваются как продуктовая дорожная карта
- Колесо призов — прототип редактора
Игровой лид‑магнит проектируется вокруг сегментов с призами, формы контакта и правил показа. Интерфейс демонстрирует модель настройки и предпросмотра, но модуль пока не входит в четыре публично доступных типа
- Шаблоны колеса призов
Для игрового виджета предусмотрены стартовые темы с разным визуальным характером и распределением наград. Перед выпуском требуется довести правила выдачи приза, защиту от повторного участия и аналитику кампании
- Скретч‑карта — шаблоны механики
Посетитель стирает защитный слой и открывает купон или бонус, после чего может оставить контакт. Экран показывает предусмотренные шаблоны; публичный запуск механики ещё не заявлен
- Эволюция интерфейса конструктора
Ранняя версия уже разделяла структуру шагов, рабочий холст и свойства, но использовала более техническую навигацию. Она включена в кейс, чтобы показать развитие продукта до двух текущих режимов — простого и визуального Pro
Задача
Что нужно
было решить
Создать мультипроектную платформу, где один аккаунт управляет сайтами, квизами, чатами и другими виджетами, а все заявки остаются связанными с источником. Редактор должен быть понятным без кода, публикация — работать на внешнем сайте, а изменение черновика — не ломать уже запущенный сценарий
Моя работа
От идеи
до реализации
Продуктовая архитектура, UX двух режимов конструктора, frontend на React и Next.js, серверное API, PostgreSQL, Redis, публикационный runtime, WebSocket‑чат, модель лидов, шаблоны, тестовые контуры и Docker‑окружение
Возможности
Что есть в проекте
Основные сценарии и функции, которые можно увидеть в интерфейсе.
Конструктор квизов
Пошаговый режим и визуальный Pro-редактор с настройкой адаптива и предпросмотром.
Публикация виджетов
Отдельная страница, кнопка на сайте, встроенный контейнер и показ по условию.
Заявки и проекты
Единое пространство заявок с источником, контактами и ответами посетителя.
Онлайн-чат
Клиентский виджет и операторский контур с обменом сообщениями через WebSocket.
Техническая основа
Стек и его роль
Технологии выбираются под данные, интерфейс и способ работы продукта.
- React · Next.js
- Конструкторы, личный кабинет, шаблоны и живой предпросмотр виджетов.
- Серверное API
- API продукта, публикация, заявки и серверная логика.
- PostgreSQL · Redis
- Данные проектов, сайтов и виджетов; серверные вспомогательные процессы.
- WebSocket
- Обмен сообщениями между посетителем сайта и оператором онлайн-чата.
- Docker
- Общее окружение frontend, API и хранилищ для разработки и запуска.
Реализация
Как это
устроено
- 01
Проект стал верхним контекстом данных: сайты, виджеты, заявки и диалоги не смешиваются между разными бизнесами пользователя
- 02
Для квиза предусмотрены простой пошаговый редактор и визуальный Pro‑конструктор с областями, блоками, настройками адаптива и живым предпросмотром
- 03
Публикация поддерживает отдельную страницу и установку на сайт: кнопкой, внутри выбранного контейнера или автоматическим показом по условию
- 04
Лид принадлежит проекту и хранит источник, виджет, контакт и ответы; удаление квиза не должно уничтожать уже полученную заявку
- 05
Онлайн‑чат разделён на клиентский виджет и операторский контур; передача сообщений использует WebSocket, а резервный опрос сохраняет работоспособность при разрыве соединения
- 06
Каталог типов отделён от их готовности: четыре виджета доступны для запуска, остальные остаются направлениями разработки и не выдаются за готовый продукт
Подробнее о продукте
Модули и сценарии
Раскройте интересующий раздел, чтобы посмотреть функции и их текущую готовность.
Как устроено приложение
Модули связаны одной моделью данных и общим публикационным контуром. Это не набор отдельных демонстраций: действие в конструкторе продолжает путь в runtime, заявках и аналитике
Проекты и сайты
Проект представляет бизнес или клиентский контур. К нему привязываются один или несколько сайтов с доменами, а уже внутри создаются виджеты, заявки, чаты и настройки команды
Единый центр виджетов
Общий список показывает все типы, их состояние публикации, связанный сайт и быстрые действия. Пользователю не нужно переключаться между разными приложениями для квиза, чата и формы
Конструктор квизов
Простой редактор собирает стандартный сценарий по шагам, а Pro‑режим управляет областями, сетками, контейнерами и отдельными блоками. Базовые элементы включают заголовки, текст, изображения, кнопки, вопросы, формы, рейтинги, шкалы, прогресс, ссылки и разделители
Шаблоны и предпросмотр
Готовые сценарии ускоряют старт, но не ограничивают редактирование. Preview проверяет desktop, tablet и mobile, портретную и альбомную ориентацию, а также размещение поверх условного сайта
AI‑генерация
AI готовит черновую структуру по URL или описанию бизнеса, цели и аудитории. Сгенерированный результат проходит через тот же редактор и не публикуется без проверки человека
Публикация и установка
Опубликованная версия отделена от черновика. Виджет может открываться по кнопке, встраиваться в контейнер, запускаться автоматически либо работать отдельной страницей; домен и правила показа контролируются настройками сайта
Заявки и CRM‑контекст
Заявка хранит не только телефон или email, но также проект, сайт, виджет, ответы и статус обработки. Она принадлежит проекту и не должна исчезать вместе с удалённым квизом
Онлайн‑чат
Клиентский виджет собирает сообщения и контакт, а операторский контур работает с диалогами, назначением ответственного, тегами, заметками, UTM и историей. Основной транспорт — WebSocket с резервным polling
Аналитика и события
Платформа связывает показы, открытия, шаги, отправку формы и источник заявки. Метрики проектируются по проектам, сайтам и виджетам, чтобы сравнивать сценарии без потери контекста
Серверный контур
Next.js отвечает за кабинет и редакторы, серверное API — за бизнес-правила, PostgreSQL — за устойчивые данные, Redis — за быстрые и фоновые сценарии. Docker фиксирует повторяемое окружение разработки и запуска
Полный каталог виджетов
Статус указан по текущему реестру продукта. «В разработке» означает, что идея, модель или интерфейс уже прорабатываются, но виджет пока нельзя продавать как готовую публичную возможность
Квиз
ДоступноИнтерактивный подбор, расчёт или опрос с вопросами, ветвлением, формой контакта и финальным экраном. Публикуется на сайте или отдельной страницей, передаёт ответы и источник в список заявок
Онлайн‑чат
ДоступноПереписка посетителя с оператором, приветствия, форма контакта, настройки окна и кнопки, уведомления и рабочая очередь диалогов. Подходит для консультаций и сбора заявок в момент выбора
Генератор клиентов
ДоступноКороткая промокампания из оффера, изображения, таймера и формы. Используется, когда нужно быстро предложить скидку, запись или подарок без многошагового квиза
Мультикнопка
ДоступноЕдиный раскрывающийся launcher для телефона, мессенджеров, чата, квиза и произвольных ссылок. Настраивает порядок каналов, внешний вид и страницы показа, а клики становятся измеряемыми событиями
Smart Popup
В разработкеКонтекстное предложение с формой, которое появляется по правилам страницы, задержке или действию пользователя. Предназначено для удержания посетителя и точечного оффера
Обратный звонок
В разработкеФорма заказа звонка с номером телефона, рабочими часами и разными сценариями по страницам. Вне рабочего времени может собирать заявку без ложного обещания мгновенного ответа
Колесо призов
В разработкеИгровой лид‑магнит с сегментами наград, формой контакта и правилами участия. Для выпуска нужны контролируемая вероятность, защита от повторов и прозрачная фиксация результата
Скретч‑карта
В разработкеПосетитель стирает слой и открывает купон, промокод или бонус. Механика подходит для коротких акций, но требует состояния участия и корректной работы на touch‑устройствах
Подарочная коробка
В разработкеПользователь выбирает коробку, узнаёт подарок и оставляет контакт. Сценарий рассчитан на сезонные кампании, наборы бонусов и ограниченные предложения
Слот‑купон
В разработкеАнимированная лента останавливается на бонусе или купоне и переводит пользователя к получению предложения. Для публичного запуска потребуются правила выдачи, лимиты и проверяемая история результата
Результат
Что получилось
Собран рабочий продуктовый контур «проект → сайт → виджет → публикация → заявка или диалог». Действуют конструкторы, шаблоны, варианты установки, единый список виджетов и заявок; следующие типы подключаются к общей архитектуре по мере готовности, без переделки базовой модели