Борисенко Дмитрий

В разработке · 2026

QuizKodrun: платформа виджетов, заявок и чатов

QuizKodrun объединяет полный путь от привязки сайта и сборки виджета до публикации, заявки и рабочего диалога с клиентом. В кейсе отдельно показаны действующие модули и направления развития: готовые возможности не смешиваются с экспериментальными виджетами

  • React
  • Next.js
  • PostgreSQL
  • Redis
  • Docker
Посмотреть экраны

Задача

Что нужно
было решить

Создать мультипроектную платформу, где один аккаунт управляет сайтами, квизами, чатами и другими виджетами, а все заявки остаются связанными с источником. Редактор должен быть понятным без кода, публикация — работать на внешнем сайте, а изменение черновика — не ломать уже запущенный сценарий

Моя работа

От идеи
до реализации

Продуктовая архитектура, UX двух режимов конструктора, frontend на React и Next.js, серверное API, PostgreSQL, Redis, публикационный runtime, WebSocket‑чат, модель лидов, шаблоны, тестовые контуры и Docker‑окружение

Возможности

Что есть в проекте

Основные сценарии и функции, которые можно увидеть в интерфейсе.

01

Конструктор квизов

Пошаговый режим и визуальный Pro-редактор с настройкой адаптива и предпросмотром.

02

Публикация виджетов

Отдельная страница, кнопка на сайте, встроенный контейнер и показ по условию.

03

Заявки и проекты

Единое пространство заявок с источником, контактами и ответами посетителя.

04

Онлайн-чат

Клиентский виджет и операторский контур с обменом сообщениями через WebSocket.

Техническая основа

Стек и его роль

Технологии выбираются под данные, интерфейс и способ работы продукта.

React · Next.js
Конструкторы, личный кабинет, шаблоны и живой предпросмотр виджетов.
Серверное API
API продукта, публикация, заявки и серверная логика.
PostgreSQL · Redis
Данные проектов, сайтов и виджетов; серверные вспомогательные процессы.
WebSocket
Обмен сообщениями между посетителем сайта и оператором онлайн-чата.
Docker
Общее окружение frontend, API и хранилищ для разработки и запуска.

Реализация

Как это
устроено

  1. 01

    Проект стал верхним контекстом данных: сайты, виджеты, заявки и диалоги не смешиваются между разными бизнесами пользователя

  2. 02

    Для квиза предусмотрены простой пошаговый редактор и визуальный Pro‑конструктор с областями, блоками, настройками адаптива и живым предпросмотром

  3. 03

    Публикация поддерживает отдельную страницу и установку на сайт: кнопкой, внутри выбранного контейнера или автоматическим показом по условию

  4. 04

    Лид принадлежит проекту и хранит источник, виджет, контакт и ответы; удаление квиза не должно уничтожать уже полученную заявку

  5. 05

    Онлайн‑чат разделён на клиентский виджет и операторский контур; передача сообщений использует WebSocket, а резервный опрос сохраняет работоспособность при разрыве соединения

  6. 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‑устройствах

Подарочная коробка

В разработке

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

Слот‑купон

В разработке

Анимированная лента останавливается на бонусе или купоне и переводит пользователя к получению предложения. Для публичного запуска потребуются правила выдачи, лимиты и проверяемая история результата

Результат

Что получилось

Собран рабочий продуктовый контур «проект → сайт → виджет → публикация → заявка или диалог». Действуют конструкторы, шаблоны, варианты установки, единый список виджетов и заявок; следующие типы подключаются к общей архитектуре по мере готовности, без переделки базовой модели

Есть похожая задача?

Обсудим ваш проект

Автоматизация заявок
Рассказать о задаче Все работы