Виджет для сайта · нативный JS · одна строка
Виджет AI-консультанта
Чат на сайт обычно тянет за собой чужой сервис, тяжёлый скрипт и стили, которые ломают вёрстку. Здесь виджет — один файл: веб-компонент в Shadow DOM, поэтому стили сайта его не задевают, а его стили не задевают сайт. Он отвечает по базе знаний, на «не знаю» предлагает оставить телефон, а сайт получает события для Метрики и CRM.
Сценарий: Коворкинг «Квадрат» — вымышленный, тот же, что у бота AI-поддержки: тарифы, переговорные, доступ, как добраться.
Открыть демо
Виджет — кнопка в углу сайта-примера, настройки — рядом. На телефоне чат открывается на весь экран.
Приложение работает в браузере: на сервер ничего не отправляется.
Что показывает демо
Как попробовать
Откройте чат
Кнопка в углу сайта-примера или приветствие, которое появится через пять секунд.
Спросите
«Как добраться?» или «Как записаться на экскурсию?» — ответ придёт со ссылкой на раздел базы знаний.
Оставьте заявку
Спросите то, чего в базе нет, — виджет честно скажет и предложит оставить телефон или позвать оператора.
Настройте под сайт
Поменяйте цвет, приветствие и позицию и скопируйте код. Справа видно, какие события получает сайт.
Без платных нейросетей
Ответы собираются из фрагментов базы знаний — тем же поиском, что у демо-бота поддержки, без языковой модели. В рабочем проекте фрагменты отдаются модели (GPT, Claude, YandexGPT или GigaChat), она отвечает своими словами, а виджет ходит к ней через ваш сервер: ключ API на сайт не попадает.
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- Ответы языковой модели по вашей базе знаний через ваш сервер, с источниками
- Оператор отвечает из Telegram или CRM, история разговора переходит к нему целиком
- Заявки и вопросы, на которые бот не ответил, — в CRM и в отчёт для пополнения базы
- Подключение к Tilda, WordPress, Битрикс или своему сайту одной строкой
Стек
- Все демо по стеку:
- Нативный JS
- JavaScript без фреймворков
- Web Components
- Shadow DOM
- BM25
- JSDoc
- Vite
Основано на
Книги и дисциплины, идеи из которых работают в этом демо.
Книга · Алексей Васильев
Программирование на JavaScript в примерах и задачах
Веб-компонент на чистом JavaScript в Shadow DOM: события открытия, вопроса и заявки уходят сайту — в цели Метрики или CRM.
Книга · Брюс Ли
Путь совершенства
Консультант на чистом JavaScript без фреймворков: весь виджет — 21 КБ в gzip, ставится одной строкой на любой сайт. Простота — признак мастерства.
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- Консультант ставится на любой сайт одной строкой — без переделки сайта и без чужого сервиса чатов.
- Отвечает со ссылкой на раздел, а на «не знаю» сразу предлагает оставить телефон: вопрос превращается в заявку.
- События виджета уходят в Метрику и CRM: видно, о чём спрашивают и сколько заявок он приносит.
Для разработчиков
- Веб-компонент в Shadow DOM без фреймворков: стили сайта не ломают виджет, а виджет — сайт. Весь бандл около 21 КБ в gzip, бюджет проверяется при сборке.
- Поиск — тот же BM25, что в песочнице поиска и в боте поддержки, общий пакет.
- Доступность: фокус остаётся внутри окна, Esc закрывает, ответы объявляются скринридеру.
Советы
Совет 01
Встраиваемый скрипт должен быть маленьким и ни от чего не зависеть: вы не знаете, что ещё стоит на чужом сайте.
Совет 02
Ключ API модели держите только на своём сервере: виджет ходит к нему, а не к модели напрямую.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Веб-приложение · распознавание речи · нейросеть в браузере
Голосовая заявка
Клиент наговаривает заявку голосом, а менеджер получает готовую карточку: имя, компания, телефон, бюджет, сроки, задача и оценка — горячий лид или нет. Речь распознаёт 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 · заявки
Квиз-форма заявки
Квиз вместо длинной формы: шесть вопросов с ветвлением, в конце — расчёт по прайсу. Менеджер получает заявку с оценкой «горячая / тёплая / холодная» и источником рекламы, а вкладка «Аналитика» показывает, на каком шаге уходят люди.
- Нативный JS
- работает
Backend на Python · вебхуки → amoCRM и Битрикс24
Интеграционный хаб заявок
Заявки с сайта, из рекламы, звонков, почты и ботов приходят на вебхуки, приводятся к одному виду, проверяются на дубли, распределяются по менеджерам и доставляются в amoCRM и Битрикс24 — с повторами, когда CRM недоступна.
- Python
- React
- TypeScript