wakz-chat-widget

Premium AI chat widget by WAKZ — A production-grade, self-contained chat widget using Shadow DOM.

Competes with Intercom & Crisp in quality. Zero external dependencies — pure vanilla JavaScript.

Features

• Shadow DOM isolation (no CSS conflicts)
• Multi-language support (English, Arabic, French) with full RTL
• Device detection (model, platform, type)
• Online/offline status with animated indicators
• Message polling with deduplication
• Mobile responsive (full-screen on small devices)
• Typing indicator animations
• Welcome messages
• Human agent badge support
• Auto-resizing textarea input
• Keyboard shortcuts (Enter to send, Shift+Enter for newline, Escape to close)
• Smooth animations and transitions
• Configurable theming (colors, position)

Installation

npm install wakz-chat-widget

Usage

Copy index.js from node_modules/wakz-chat-widget/ to your public folder and include it:

<script src="/wakz-widget.js"
  data-api-key="YOUR_API_KEY"
  data-server="https://your-server.com"
  async>
</script>

Configuration

The widget fetches its configuration from your server's /api/v1/embed/config endpoint. Configurable options include:

| Option | Type | Default | Description | |--------|------|---------|-------------| | botName | string | 'WAKZ' | Bot display name | | welcomeMessage | string | '' | Initial welcome message | | primaryColor | string | '#171717' | Primary theme color | | chatBg | string | '#f8f9fa' | Chat area background | | btnColor | string | '#171717' | FAB button color | | widgetBg | string | '#ffffff' | Widget background | | position | string | 'bottom-right' | Widget position | | language | string | 'en' | Language (en, ar, fr) | | showStatus | boolean | true | Show online/offline dot | | online | boolean | true | Initial status |

Version History

v2.2.0

• Added device model, platform, and type detection (User-Agent Client Hints API + UA fallback)
• Device info sent with session data for dashboard analytics

v2.0.0

• Complete rewrite with Shadow DOM architecture
• Multi-language support (EN/AR/FR) with RTL
• Production-grade UI with animations

License

MIT