Виджет для сайта · нативный JS · заявки
Квиз-форма заявки
Форма «Оставьте телефон» собирает мало заявок, а по тем, что приходят, менеджер расспрашивает клиента заново. Квиз задаёт несколько простых вопросов, сразу показывает человеку расчёт и только потом просит контакты. Менеджер получает готовую карточку: что нужно, на какую сумму, насколько срочно и с какой рекламы пришёл клиент.
Сценарий: Обжарочная «Зерно» — вымышленная — подбирает кофе и оборудование для новых и работающих кофеен и для офисов.
Открыть демо
Квиз стоит на макете сайта «Зерна» — блоком на странице или окном по кнопке. На телефоне окно открывается на весь экран.
Приложение работает в браузере: на сервер ничего не отправляется.
Что показывает демо
Как попробовать
Пройдите квиз
Выберите «Открываю кофейню», число чашек и вкус — на каждом шаге варианты свои.
Уйдите и вернитесь
Перезагрузите страницу посреди квиза — он предложит продолжить с того же места.
Оставьте контакты
Справа появится сообщение менеджеру в Telegram с оценкой заявки, рядом — JSON для CRM.
Посмотрите воронку
Вкладка «Аналитика»: месяц синтетических заходов, ваши прохождения и шаг, после которого уходят чаще всего.
Без платных нейросетей
Квиз работает без сервера и без нейросети: расчёт идёт по прайсу «Зерна», оценка заявки — по правилам, как у демо-бота квалификации лидов. Заявка, черновик и заходы хранятся в вашем браузере. В рабочем проекте заявка уходит на сервер, оттуда — в amoCRM или Битрикс24 и сообщением менеджеру, а шаги квиза — целями в Метрику.
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- Заявка в amoCRM или Битрикс24 — сделка с источником, расчётом и оценкой
- Сообщение менеджеру в Telegram или Max с кнопками «Взять» и «Перезвонить позже»
- Цели Метрики на каждый шаг и A/B-тест вопросов
- Языковая модель разбирает свободный комментарий клиента и дописывает в карточку, что важно менеджеру
Стек
- Все демо по стеку:
- Нативный JS
- JavaScript без фреймворков
- Web Components
- Shadow DOM
- <dialog>
- localStorage
- JSDoc
- Vite
Основано на
Книги и дисциплины, идеи из которых работают в этом демо.
Книга · Алексей Васильев
Программирование на JavaScript в примерах и задачах
Квиз без фреймворков: ветвление вопросов, автосохранение в localStorage, встраивается одним файлом.
Книга · Брюс Ли
Путь совершенства
Квиз — один файл на 12 КБ без зависимостей вместо тяжёлого конструктора форм.
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- Человек сначала видит расчёт и только потом оставляет контакты — так их оставляют охотнее, чем в форме «оставьте телефон».
- Менеджер получает готовую карточку: что нужно, на какую сумму, насколько срочно и с какой рекламы.
- Воронка по шагам показывает, на каком вопросе уходят люди, — его можно переписать.
Для разработчиков
- Чистый JS: Custom Elements, Shadow DOM и <dialog>, без зависимостей. Файл quiz.js — около 12 КБ в gzip.
- Вопросы и ветвление — данные, а не код. Черновик и UTM первого захода хранятся в localStorage.
- Оценка заявки — те же правила, что у бота квалификации лидов.
Советы
Совет 01
Сохраняйте UTM первого захода, а не последнего, — иначе всю заслугу заберёт прямой заход.
Совет 02
Автосохранение черновика стоит копейки, а возвращает тех, кого отвлекли.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Веб-приложение · распознавание речи · нейросеть в браузере
Голосовая заявка
Клиент наговаривает заявку голосом, а менеджер получает готовую карточку: имя, компания, телефон, бюджет, сроки, задача и оценка — горячий лид или нет. Речь распознаёт Whisper прямо в браузере.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · звонок в браузере · распознавание и синтез речи
Голосовой оператор доставки
Робот принимает заказы по телефону вместо администратора: слушает, переспрашивает, проверяет адрес по зонам доставки, считает сумму и читает заказ перед подтверждением. Звонок идёт прямо в браузере — кнопка «Позвонить», без номера телефона.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · распознавание речи · контроль отдела продаж
Речевая аналитика звонков
Звонок отдела продаж превращается в расшифровку по ролям, оценку по скрипту и заполненную карточку сделки: клиент, контакты, интерес, озвученная цена, следующий шаг и задача менеджеру. Речь распознаёт Whisper прямо в браузере.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · документы · DOCX и PDF
Генератор КП и договора
Менеджер заполняет анкету сделки — покупатель, товары, скидка, НДС, — а коммерческое предложение, договор поставки и счёт собираются на листе A4 на глазах. На выходе — Word, PDF или JSON.
- React
- TypeScript
- работает
Веб-приложение · B2B · КП в PDF
Конфигуратор цены
Менеджер собирает заказ на все окна квартиры: тип, размер, створки на схеме, профиль, стеклопакет и цвет. Правила производства проверяются сразу, скидки и рассрочка считаются сами, КП с номером уходит в PDF.
- React
- TypeScript
- работает
Веб-приложение · финансы · сравнение
Ипотечный калькулятор
Пять программ банков на одном экране: какие подходят клиенту и почему остальные нет. Льготная ставка от застройщика, дифференцированный платёж, досрочное погашение, нагрузка на доход и налоговый вычет.
- React
- TypeScript
- работает
Веб-приложение · смета · PDF
Калькулятор сметы ремонта
Размеры комнат превращаются в площади пола, стен и потолка, а те — в работы по этапам. Работа и материалы отдельно, срок по выработке бригады, график оплаты и версии сметы для торга с клиентом.
- React
- TypeScript
- работает
Веб-приложение · витрина · чекаут · заказы
SPA-каталог на React
Магазин целиком в браузере: поиск с подсказками и исправлением раскладки, фасеты с живыми счётчиками, ссылки на любой фильтр, избранное, корзина с промокодом и чекаут с выбором слота доставки. Заказы видны в «Моих заказах» со статусами, их можно повторить или отменить.
- React
- TypeScript
- работает
Машинное обучение на Python · работает в браузере
Аналитика отзывов с маркетплейсов
Отзывы с Wildberries, Ozon и Яндекс Маркета через API продавца: модели scikit-learn определяют тональность и о чём пишут покупатели, тревога поднимается в первую неделю всплеска жалоб, новые темы находятся сами, а ответ уходит обратно через API площадки. Модели обучаются прямо в браузере.
- Python
- React
- TypeScript
- работает
Виджет для сайта · нативный JS · одна строка
Виджет AI-консультанта
Консультант для любого сайта, который ставится одной строкой: отвечает по базе знаний со ссылкой на источник, собирает заявку и зовёт оператора. Написан на чистом JavaScript без фреймворков — весь виджет 21 КБ в gzip.
- Нативный JS
- работает
Backend на Python · вебхуки → amoCRM и Битрикс24
Интеграционный хаб заявок
Заявки с сайта, из рекламы, звонков, почты и ботов приходят на вебхуки, приводятся к одному виду, проверяются на дубли, распределяются по менеджерам и доставляются в amoCRM и Битрикс24 — с повторами, когда CRM недоступна.
- Python
- React
- TypeScript