Chat Widget Demo

🚀 Быстрая интеграция

Добавьте этот скрипт на любую страницу вашего сайта:

Или с настройками:

<script>
// Настройки виджета (опционально)
window.CHAT_WIDGET_API_URL = 'https://chat.coolify.integration-ai.ru/api/chat';
window.CHAT_WIDGET_POSITION = 'bottom-right'; // bottom-left, top-right, top-left
window.CHAT_WIDGET_THEME = 'light'; // light, dark (пока только light)
</script>
<script src="https://chat.coolify.integration-ai.ru/chat-widget.js"></script>
                

⚙️ Конфигурационные опции

Глобальные переменные для настройки:

CHAT_WIDGET_API_URL

URL вашего API эндпоинта
По умолчанию: текущий домен + /api/chat

CHAT_WIDGET_POSITION

Позиция виджета: bottom-right, bottom-left, top-right, top-left
По умолчанию: bottom-right

CHAT_WIDGET_THEME

Тема оформления: light, dark
По умолчанию: light
✨ Новая функция: Полная поддержка темной темы!

CHAT_WIDGET_MANUAL_INIT

true - отключает автоинициализацию
По умолчанию: false (автоинициализация)

🔧 Ручная инициализация

Если вам нужна ручная инициализация:

<script src="https://chat.coolify.integration-ai.ru/chat-widget.js"></script>
<script>
window.CHAT_WIDGET_MANUAL_INIT = true;

// Инициализация с опциями
ChatWidget.init({
  apiUrl: 'https://your-domain.com/api/chat',
  position: 'bottom-left',
  theme: 'light'
});
</script>
                

✨ Особенности

🎯 Один скрипт

Всего один тег <script> для полной интеграции. Никаких зависимостей от фреймворков сайта.

🌐 Web Components

Использует современные Web Components с Shadow DOM для полной изоляции стилей.

📡 Streaming

Поддержка потокового ответа от n8n для实时 общения.

📱 Адаптивный

Автоматически адаптируется под мобильные устройства.

🔒 Безопасный

Backend проксирует запросы, webhook n8n никогда не раскрывается в браузере.

🚀 Production-ready

Оптимизирован для работы в Docker/Coolify с правильной конфигурацией nginx.

📚 API Документация

Эндпоинт чата

POST /api/chat
Content-Type: application/json

{
  "text": "Привет, как дела?",
  "sessionId": "session_1234567890_abc123def",
  "metadata": {
    "timestamp": "2024-01-11T12:00:00.000Z",
    "userAgent": "Mozilla/5.0...",
    "url": "https://example.com/page"
  }
}

Ответ

Content-Type: text/plain
Transfer-Encoding: chunked

Привет! У меня все отлично, спасибо что спросил...

Коды ответов

200 OK: Успешный ответ, данные передаются потоково
400 Bad Request: Неверный формат запроса
500 Internal Server Error: Ошибка сервера или n8n
504 Gateway Timeout: Таймаут подключения к n8n

Формат стриминга

API поддерживает потоковую передачу данных в формате NDJSON (Newline Delimited JSON) от n8n:

{"type": "item", "content": "Привет"}
{"type": "item", "content": "Как дела?"}
{"type": "end"}

🛠 Техническая информация

Архитектура системы:

Frontend: Vanilla JS + Web Components + Shadow DOM + TailwindCSS
Backend: Node.js HTTP server с проксированием к n8n
Streaming: ReadableStream API для chunked responses
Инфраструктура: Docker Compose + nginx + Coolify
Стилизация: TailwindCSS с поддержкой темной темы
Хранение: localStorage для персистентности сессий

💬 Chat Widget