Cybernet Chat Widget

AI-powered chat widget for customer support with WebSocket integration, i18n support, and real-time features.

🚀 Quick Installation

<script
  src="https://unpkg.com/[email protected]/dist/chat-widget.js"
  data-backend-http="https://api.example.com"
  data-backend-ws="wss://api.example.com"
  data-agent-id="your-agent-id"
></script>

✨ Features

• 🌐 i18n Support - English and Kazakh with automatic detection
• ⌨️ Typing Indicators - Real-time user activity tracking
• 👁️ UI State Management - Idle timer integration
• 💬 Idle Messages - Timeout notifications from backend
• 🎨 Customizable - Colors, position, branding
• 🔒 Secure - CSRF/nonce protection, session management
• 📱 Responsive - Mobile-friendly design

📦 Installation

Via npm

npm install cybernet-chat-widget

Via CDN

<script src="https://unpkg.com/[email protected]/dist/chat-widget.js"></script>

🔧 Configuration

<script
  src="chat-widget.js"
  data-backend-http="http://localhost:8000"
  data-backend-ws="ws://localhost:8000"
  data-agent-id="agent-123"
  data-title="AI Chat Agent"
  data-position="right"
  data-primary="#2563eb"
  data-accent="#f1f5f9"
></script>

Options

| Attribute | Description | Default | |-----------|-------------|---------| | data-backend-http | HTTP API endpoint | Required | | data-backend-ws | WebSocket endpoint | Required | | data-agent-id | Agent identifier | Required | | data-title | Widget title | "AI Chat Agent" | | data-position | Position (left/right) | "right" | | data-primary | Primary color | "#2563eb" | | data-accent | Accent color | "#f1f5f9" |

👨‍💻 Author

Evgenii Konev

• Email: [email protected]
• Organization: Cybernet