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>

если вдруг так по простому не заработает, можно так

    <div id="chat-popup-root"></div>

    <script defer src="https://argoai.ru/chat-popup-widget/dist/chat-popup.iife.js"></script>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            const root = document.getElementById('chat-popup-root') || document.body;
            // безопасный вызов, если функция ещё не успела определиться
            if (typeof window.mountChatPopup === 'function') {
                window.mountChatPopup({ container: root });
            }
        });
    </script>

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

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

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

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

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

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

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

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

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

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

+7 925 344 0222