Chat Popup Widget

Интеллектуальный чат-бот с нейросетью GPT, подключаемый на ваш сайт двумя строками. Например как тут https://ultrazoom.ru

🧩 Что это?

Chat Popup Widget — это автономный виджет чата, подключаемый к любому сайту всего двумя строками HTML-кода. Он предоставляет пользователю живое взаимодействие с нейросетью GPT, оформленное в виде плавающего окна, которое можно перемещать, масштабировать и кастомизировать.

<script src="https://argoai.ru/chat-popup-widget/dist/chat-popup.iife.js"></script> <script>window.mountChatPopup();</script>

🚀 Возможности

✅ Подключение и работа без сборки и модулей
✅ Поддержка GPT-4 (через OpenAI API)
✅ Интерактивный, дружелюбный «человеческий» бот
✅ Перетаскивание окна мышкой
✅ Изменение размеров
✅ Анимация мышления
✅ Возможность управлять параметрами модели прямо из чата

🧠 Нейросеть под капотом

На серверной стороне реализовано подключение к OpenAI API. В качестве «мозга» используется GPT-4 (или его облегчённые версии), с возможностью гибкой настройки через команды чата.

Серверная логика построена на C# (.NET) и позволяет:

Обрабатывать системные команды (ver, getmodel, setmodel)
Подгружать и использовать SysPrompt — «личность» бота
Сохранять историю общения
Работать с несколькими моделями

🎭 Личность бота

Согласно системному промпту, бот — это:

Андрей, программист из МГУ (НИВЦ)
Специалист по 1С, Python, C#, SQL, JavaScript и др.
Помогает с VPN, CryptoPro, серверами, Диадоком, госуслугами
Никогда не говорит, что он ИИ (даже если спросить)
Отвечает как человек, с юмором и конкретикой

⚙️ Управление параметрами через команды в чате

Команда	Что делает
`ver`	Показывает версию виджета
`getmodel`	Показывает текущую модель
`setmodel gpt-4o-mini`	Переключает на указанную модель
`gettemp`	Показывает текущую температуру генерации
`settemp 0.8`	Изменяет температуру (от 0 до 1)
`getmaxtokens`	Показывает лимит токенов
`setmaxtokens 1000`	Устанавливает новое значение максимума

Температура влияет на креативность ответа, а токены — на максимальную длину.

📋 Доступные модели:

gpt-4o-mini
gpt-4o
gpt-4.1
gpt-4.1-mini

🖱️ Интерфейс

Чат автоматически разворачивается через 5 секунд после загрузки страницы
Можно перетаскивать окно мышкой (зажав шапку)
Можно изменять размер (потянув за угол)
Виджет стилизован через SCSS и не конфликтует с внешними стилями
Использует FontAwesome для иконок

📡 Архитектура

Фронтенд:

React 18
Сборка Vite с IIFE-форматом
vite-plugin-css-injected-by-js для автоматического подключения CSS
Встроенная функция window.mountChatPopup()

Бэкенд:

ASP.NET Core Web API
Обращение к OpenAI через https://api.openai.com/v1/chat/completions
Настраиваемый системный промпт (SysPrompt.txt)
Сохранение истории общения в JSON

🧪 Пример HTML-файла

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8" />   <title>Чат с нейросетью</title> </head> <body>   <h1>Добро пожаловать!</h1>    <script src="https://argoai.ru/chat-popup-widget/dist/chat-popup.iife.js"></script>   <script>window.mountChatPopup();</script> </body> </html>

📦 Установка и исходный код

Проект с открытым исходным кодом доступен на GitHub:

👉 https://github.com/amizerov/chat-popup-widget

🧑‍💻 Для кого это?

Для сайтов, где нужно добавить умного помощника без внедрения сложных SDK
Для интеграции с внутренними системами (CRM, ERP, Helpdesk)
Для демонстрации возможностей GPT в действии

🔮 Планы по развитию

Поддержка тем оформления (dark/light)
Отправка файлов и вложений
Интеграция с Telegram, WhatsApp, Битрикс24
Панель админа и аналитика по чату
Возможность вести чат от имени нескольких «персон»

📞 Связь и заказ

Разработка и сопровождение:
ООО «АРГО Софт» — программное обеспечение и нейросети для бизнеса.

Ищете чат-бота под ваши задачи? Хотите такой виджет под ключ?
💬 Напишите нам — мы всё подключим, обучим и оформим!

ссылка на оригинал статьи https://habr.com/ru/articles/903350/