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