π¬ Chat Widget
ΠΠΎΡΠΎΠ²ΡΠΉ embeddable ΡΠ°Ρ-Π²ΠΈΠ΄ΠΆΠ΅Ρ Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠ΅ΠΉ n8n Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°
Π’Π΅ΠΊΡΡΠ°Ρ Π²Π΅ΡΡΠΈΡ: v1.1.2
β
Π‘ΠΈΡΡΠ΅ΠΌΠ° Π³ΠΎΡΠΎΠ²Π° ΠΊ ΡΠ°Π±ΠΎΡΠ΅! ΠΠΈΠ΄ΠΆΠ΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
π ΠΡΡΡΡΠ°Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ ΡΠΊΡΠΈΠΏΡ Π½Π° Π»ΡΠ±ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°:
<script src="https://chat.coolify.integration-ai.ru/chat-widget.js"></script>
ΠΠ»ΠΈ Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ:
<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 Π΄Π»Ρ ΠΏΠ΅ΡΡΠΈΡΡΠ΅Π½ΡΠ½ΠΎΡΡΠΈ ΡΠ΅ΡΡΠΈΠΉ
Β© 2026 Chat Widget. Π‘ΠΎΠ·Π΄Π°Π½ΠΎ AI ΠΠ΅ΡΡΠΎΠ½Π°Π».