Mori Chat Widget

A modern, responsive chat widget built with React and Chakra UI, designed for seamless integration into any website. The widget provides an AI-powered chat experience with e-commerce capabilities, perfect for customer support and sales assistance.

🚀 Features

• AI-Powered Chat: Intelligent conversation capabilities with natural language processing
• E-commerce Integration: Product recommendations, shopping cart, and checkout flows
• Responsive Design: Mobile-first approach that works on all devices
• Persian/Farsi Support: Full RTL support with Persian UI elements
• Customizable: Easy to customize colors, branding, and behavior
• Shadow DOM: Isolated styling that won't conflict with your website
• TypeScript: Built with TypeScript for better development experience

📦 Installation

Quick Start

Add this HTML structure to your page:

<div id="dori-react-widget-host"></div>
<script
  id="dori-react-widget"
  data-sharing-id="your-sharing-id"
  src="https://cdn.jsdelivr.net/npm/mori-chat-widget@latest/dist/widget.js"
></script>

🎨 Customization

Styling

The widget automatically adapts to your website's design while maintaining its own identity. You can customize:

• Colors: Primary and accent colors
• Branding: Logo and company information
• Messages: Welcome text and default responses
• Behavior: Chat flow and interaction patterns

🔧 Development

Local Development

1. Clone the repository:

git clone <repository-url>
cd my-app

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Open your browser to http://localhost:3000

Building for Production

npm run build

This will create a dist folder with the production-ready widget files.

Development vs Production

• Development: npm run dev - Uses direct DOM rendering for easier debugging
• Production: npm run build - Creates optimized bundle with shadow DOM isolation

📱 Widget Components

Core Features

• Welcome Screen: Initial greeting with animated logo
• Chat Interface: Full-featured chat with message history
• Product Recommendations: AI-powered product suggestions
• Shopping Cart: Integrated e-commerce functionality
• Responsive Design: Works seamlessly on all devices

Technical Architecture

• React 19: Latest React with modern hooks and features
• Chakra UI: Consistent, accessible component library
• TypeScript: Full type safety and better development experience
• Shadow DOM: Isolated styling and DOM structure
• Vite: Fast build tooling and development server

🌐 Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

📊 Analytics & Tracking

The widget automatically tracks:

• Conversation sessions
• User interactions
• Product recommendations
• Conversion metrics

All data is associated with your data-sharing-id for easy analysis.

🔒 Security & Privacy

• Isolated Environment: Widget runs in shadow DOM for security
• No Cross-Site Scripting: Secure communication protocols
• Data Privacy: User data is handled according to privacy standards
• GDPR Compliant: Built with privacy regulations in mind

🚀 Performance

• Lightweight: Optimized bundle size for fast loading
• Lazy Loading: Components load only when needed
• Efficient Rendering: React 19 optimizations for smooth performance
• CDN Delivery: Fast global distribution via jsDelivr

📞 Support

For technical support or questions:

• Open an issue in the repository
• Contact support at [email protected]
• Check the documentation for common solutions

📄 License

This project is licensed under the MIT License.

🤝 Contributing

We welcome contributions! Please feel free to:

• Submit bug reports
• Request new features
• Contribute code improvements
• Improve documentation

🔄 Updates

The widget automatically updates when you use the @latest tag. For version-specific deployments, use:

<div id="dori-react-widget-host"></div>
<script
  id="dori-react-widget"
  data-sharing-id="your-id"
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/widget.js"
></script>

Mori Chat Widget - Making customer support smarter and more engaging.