🎉 Добре дошли в Чат Системата!

📌 Как работи?

Вижте долу в десния ъгъл - има тюркоазена икона с пощенски плик 📧

Кликнете върху нея, за да отворите чат прозореца!

Static hosting режим: ако няма Node.js, widget-ът автоматично работи като offline/contact форма.

✅ Функционалности:

Real-time чат комуникация - Моментална размяна на съобщения (когато има Node.js backend)
Static fallback режим - Работи и без Node.js като контактна/офлайн форма
Локално запазване - Офлайн съобщенията се записват в браузъра
Събиране на потребителски данни - Име, email, IP, браузър
Офлайн съобщения - Форма когато няма налични агенти
Автоматични тригери - Съобщения при определени условия
Online/Offline статус - Индикация за налични агенти
Admin панел - Пълна система за управление

🔧 Интеграция във вашия сайт:

Стъпка 1: Копирайте този код и го поставете преди затварящия </body> таг във вашия HTML файл:

<!-- ========================================== -->
<!-- ЧАТ WIDGET - ИНТЕГРАЦИЯ -->
<!-- ========================================== -->

<!-- 1. CSS стилове за widget-а -->
<link rel="stylesheet" href="https://chat-ochilatsvqt.com/chat-widget.css">

<!-- 2. Контейнер където ще се създаде widget-ът -->
<div id="chat-widget-container"></div>

<!-- 3. Socket.IO библиотека (real-time комуникация) -->
<script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>

<!-- 4. JavaScript код на widget-а -->
<script src="https://chat-ochilatsvqt.com/chat-widget.js"></script>

⚙️ Настройки за static hosting:

Стъпка 2: Отворете hosting-config.js и оставете staticMode: true за хостинг без Node.js.

window.CHAT_HOSTING_CONFIG = {
      backendUrl: '',               // остави празно при static hosting
      staticMode: true,             // задължително за хостинг без Node.js
      webhookUrl: '',               // по избор: Formspree/Make/Zapier/n8n
      contactEmail: 'ivelina@localhost.test'
    };

🎨 Персонализация:

Променете цветовете - Отворете Настройки в Admin панела
Текст в хедъра - Може да го смените от настройките
Позиция на бутона - Долу-вдясно, долу-вляво, горе-вдясно, горе-вляво
Автоматични съобщения - Управлявайте от Тригери

🖥️ Admin панел:

Адрес: https://chat-ochilatsvqt.com/admin.html
Login: admin
Парола: admin

⚠️ Важно за продукция:

Променете admin паролата
Използвайте HTTPS (SSL сертификат)
Настройте CORS само за вашия домейн
Добавете rate limiting за защита от спам
Правете backup на базата данни редовно

📚 Допълнителни ресурси:

👨‍💼 Admin Panel - Управление на чатове и агенти
⚙️ Настройки на Widget - Визуални и функционални настройки
⚡ Автоматични Тригери - Създавайте автоматични съобщения

🚀 Пример за интеграция в различни платформи:

HTML страница:

<!DOCTYPE html>
<html>
<head>
  <title>Моят сайт</title>
</head>
<body>
  <h1>Съдържание на сайта</h1>
  
  <!-- Чат widget се добавя ПРЕДИ затварящия body таг -->
  <link rel="stylesheet" href="https://chat-ochilatsvqt.com/chat-widget.css">
  <div id="chat-widget-container"></div>
  <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
  <script src="https://chat-ochilatsvqt.com/chat-widget.js"></script>
</body>
</html>

WordPress:

Добавете кода в footer.php преди </body> или използвайте plugin като "Insert Headers and Footers"

React/Vue/Angular:

Добавете кода в главния index.html файл или динамично зареждайте скриптовете в компонент

🐛 Troubleshooting:

Не виждам иконата? Проверете дали сървърът работи на https://chat-ochilatsvqt.com
Грешка при свързване? Уверете се че serverUrl в конфига е правилен
CSS не се зарежда? Проверете пътя към chat-widget.css
Socket.IO грешка? Проверете дали CDN линкът работи в конзолата (F12)

📊 Технически детайли:

Backend: Node.js + Express + Socket.IO
Database: SQLite (файлова база данни)
Frontend: Vanilla JavaScript, HTML5, CSS3
Real-time: WebSocket комуникация
Port: 3000 (може да се смени в server.js)

💡 Скролнете надолу!

Иконата на чата е в долния десен ъгъл 👇