Eshal Chat Widget
A beautiful, production-ready chat widget with dark mode support, quick questions, and smooth animations.
Features
- 🎨 Beautiful Design - Modern, professional UI inspired by Intercom
- 🌓 Dark Mode - Full dark mode support with smooth transitions
- ⚡ Quick Questions - Pre-defined clickable questions for users
- 🤖 Bot Avatar - Customizable bot avatar for assistant messages
- 📱 Responsive - Works perfectly on all devices
- 🚀 Lightweight - Optimized bundle size and performance
Quick Start
Installation
npm install
npm run build
Usage
<!-- Include the widget -->
<link rel="stylesheet" href="dist/index.css">
<script src="dist/chat-widget.min.js"></script>
<script>
ChatWidget.init({
companyName: "Your Company",
companyLogo: "https://example.com/logo.png",
primaryColor: "#2563eb",
quickQuestions: [
"What are your business hours?",
"How can I contact support?",
"What services do you offer?"
],
apiBaseUrl: "https://your-api.com",
organizationId: "your-org-id"
});
</script>
Configuration
| Option | Type | Default | Description |
|---|---|---|---|
companyName | string | "Support Team" | Company/team name |
companyLogo | string | null | Company logo URL |
primaryColor | string | "#2563eb" | Primary brand color |
quickQuestions | string[] | [] | Array of quick questions |
darkMode | boolean | false | Enable dark mode |
position | string | "bottom-right" | Widget position |
apiBaseUrl | string | null | API endpoint URL |
organizationId | string | null | Organization ID |
API Methods
// Open the widget
ChatWidget.open();
// Close the widget
ChatWidget.close();
// Toggle theme
ChatWidget.toggleTheme();
// Update configuration
ChatWidget.updateConfig({ primaryColor: "#ff0000" });
// Send message programmatically
ChatWidget.sendMessage("Hello!");
// Destroy the widget
ChatWidget.destroy();
Development
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Generate TypeScript definitions
npm run generate-types
License
MIT