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)
✅ Интерактивный, дружелюбный “человеческий” бот
✅ Перетаскивание окна мышкой
✅ Изменение размеров
✅ Анимация мышления ^[1]
✅ Возможность управлять параметрами модели прямо из чата

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

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

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

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

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

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

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

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

Команда	Что делает
`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 ^[4] Core Web API
Обращение к OpenAI через https://api.openai.com/v1/chat/completions ^[5]
Настраиваемый системный промпт (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 ^[6]

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

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

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

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

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

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

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

Автор: Nicotino

Источник ^[7]

Сайт-источник BrainTools: https://www.braintools.ru

Путь до страницы источника: https://www.braintools.ru/article/14519

URLs in this post:

[1] мышления: http://www.braintools.ru/thinking

[2] логика: http://www.braintools.ru/article/7640

[3] юмором: http://www.braintools.ru/article/3517

[4] ASP.NET: http://ASP.NET

[5] https://api.openai.com/v1/chat/completions: https://api.openai.com/v1/chat/completions

[6] https://github.com/amizerov/chat-popup-widget: https://github.com/amizerov/chat-popup-widget

[7] Источник: https://habr.com/ru/articles/903350/?utm_source=habrahabr&utm_medium=rss&utm_campaign=903350

Нажмите здесь для печати.