Dori 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/dori-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
- Clone the repository:
git clone <repository-url>
cd my-app
- Install dependencies:
npm install
- Start development server:
npm run dev
- 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.
Scoped NPM Publish (@dori-ai/dori-side-widget)
Use these scripts to publish the scoped package with branch-safe tags:
# From dev branch -> publishes tag "dev" with auto dev timestamp version
npm run publish:dev:scoped
# From main branch -> publishes tag "latest" with package.json version
npm run publish:prod:scoped
Dry-run checks:
npm run publish:dev:dry
npm run publish:prod:dry
From CI (npm trusted publishing)
.github/workflows/publish.yml runs the same script on a clean runner and
authenticates with a per-run OIDC token instead of an npm token, so nothing
secret lives on a laptop:
gh workflow run publish.yml -f channel=dev --ref dev -R DoriService/dori-side-widget
gh workflow run publish.yml -f channel=prod --ref main -R DoriService/dori-side-widget
The prod run aligns package.json with the highest version on the registry,
bumps the patch, publishes @latest and commits the bump back to main. Pull
before a local prod publish afterwards or the next bump collides. The
trusted-publisher entry on npmjs.com is keyed on the workflow filename;
renaming publish.yml breaks CI publishing until it is updated.
CI releases carry no npm provenance: npm only accepts a provenance bundle from a public source repository, and this repo is private.
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>
Dori Chat Widget - Making customer support smarter and more engaging.