dori-pdp-widget 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +160 -0
- package/dist/widget.js +169 -0
- package/package.json +51 -0
package/README.md
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
# Mori Chat Widget
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## 🚀 Features
|
|
6
|
+
|
|
7
|
+
- **AI-Powered Chat**: Intelligent conversation capabilities with natural language processing
|
|
8
|
+
- **E-commerce Integration**: Product recommendations, shopping cart, and checkout flows
|
|
9
|
+
- **Responsive Design**: Mobile-first approach that works on all devices
|
|
10
|
+
- **Persian/Farsi Support**: Full RTL support with Persian UI elements
|
|
11
|
+
- **Customizable**: Easy to customize colors, branding, and behavior
|
|
12
|
+
- **Shadow DOM**: Isolated styling that won't conflict with your website
|
|
13
|
+
- **TypeScript**: Built with TypeScript for better development experience
|
|
14
|
+
|
|
15
|
+
## 📦 Installation
|
|
16
|
+
|
|
17
|
+
### Quick Start
|
|
18
|
+
|
|
19
|
+
Add this HTML structure to your page:
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<div id="dori-react-widget-host"></div>
|
|
23
|
+
<script
|
|
24
|
+
id="dori-react-widget"
|
|
25
|
+
data-sharing-id="your-sharing-id"
|
|
26
|
+
src="https://cdn.jsdelivr.net/npm/mori-chat-widget@latest/dist/widget.js"
|
|
27
|
+
></script>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## 🎨 Customization
|
|
31
|
+
|
|
32
|
+
### Styling
|
|
33
|
+
|
|
34
|
+
The widget automatically adapts to your website's design while maintaining its own identity. You can customize:
|
|
35
|
+
|
|
36
|
+
- **Colors**: Primary and accent colors
|
|
37
|
+
- **Branding**: Logo and company information
|
|
38
|
+
- **Messages**: Welcome text and default responses
|
|
39
|
+
- **Behavior**: Chat flow and interaction patterns
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## 🔧 Development
|
|
43
|
+
|
|
44
|
+
### Local Development
|
|
45
|
+
|
|
46
|
+
1. Clone the repository:
|
|
47
|
+
```bash
|
|
48
|
+
git clone <repository-url>
|
|
49
|
+
cd my-app
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
2. Install dependencies:
|
|
53
|
+
```bash
|
|
54
|
+
npm install
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
3. Start development server:
|
|
58
|
+
```bash
|
|
59
|
+
npm run dev
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
4. Open your browser to `http://localhost:3000`
|
|
63
|
+
|
|
64
|
+
### Building for Production
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
npm run build
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
This will create a `dist` folder with the production-ready widget files.
|
|
71
|
+
|
|
72
|
+
### Development vs Production
|
|
73
|
+
|
|
74
|
+
- **Development**: `npm run dev` - Uses direct DOM rendering for easier debugging
|
|
75
|
+
- **Production**: `npm run build` - Creates optimized bundle with shadow DOM isolation
|
|
76
|
+
|
|
77
|
+
## 📱 Widget Components
|
|
78
|
+
|
|
79
|
+
### Core Features
|
|
80
|
+
|
|
81
|
+
- **Welcome Screen**: Initial greeting with animated logo
|
|
82
|
+
- **Chat Interface**: Full-featured chat with message history
|
|
83
|
+
- **Product Recommendations**: AI-powered product suggestions
|
|
84
|
+
- **Shopping Cart**: Integrated e-commerce functionality
|
|
85
|
+
- **Responsive Design**: Works seamlessly on all devices
|
|
86
|
+
|
|
87
|
+
### Technical Architecture
|
|
88
|
+
|
|
89
|
+
- **React 19**: Latest React with modern hooks and features
|
|
90
|
+
- **Chakra UI**: Consistent, accessible component library
|
|
91
|
+
- **TypeScript**: Full type safety and better development experience
|
|
92
|
+
- **Shadow DOM**: Isolated styling and DOM structure
|
|
93
|
+
- **Vite**: Fast build tooling and development server
|
|
94
|
+
|
|
95
|
+
## 🌐 Browser Support
|
|
96
|
+
|
|
97
|
+
- Chrome 88+
|
|
98
|
+
- Firefox 85+
|
|
99
|
+
- Safari 14+
|
|
100
|
+
- Edge 88+
|
|
101
|
+
|
|
102
|
+
## 📊 Analytics & Tracking
|
|
103
|
+
|
|
104
|
+
The widget automatically tracks:
|
|
105
|
+
- Conversation sessions
|
|
106
|
+
- User interactions
|
|
107
|
+
- Product recommendations
|
|
108
|
+
- Conversion metrics
|
|
109
|
+
|
|
110
|
+
All data is associated with your `data-sharing-id` for easy analysis.
|
|
111
|
+
|
|
112
|
+
## 🔒 Security & Privacy
|
|
113
|
+
|
|
114
|
+
- **Isolated Environment**: Widget runs in shadow DOM for security
|
|
115
|
+
- **No Cross-Site Scripting**: Secure communication protocols
|
|
116
|
+
- **Data Privacy**: User data is handled according to privacy standards
|
|
117
|
+
- **GDPR Compliant**: Built with privacy regulations in mind
|
|
118
|
+
|
|
119
|
+
## 🚀 Performance
|
|
120
|
+
|
|
121
|
+
- **Lightweight**: Optimized bundle size for fast loading
|
|
122
|
+
- **Lazy Loading**: Components load only when needed
|
|
123
|
+
- **Efficient Rendering**: React 19 optimizations for smooth performance
|
|
124
|
+
- **CDN Delivery**: Fast global distribution via jsDelivr
|
|
125
|
+
|
|
126
|
+
## 📞 Support
|
|
127
|
+
|
|
128
|
+
For technical support or questions:
|
|
129
|
+
- Open an issue in the repository
|
|
130
|
+
- Contact support at support@mori.com
|
|
131
|
+
- Check the documentation for common solutions
|
|
132
|
+
|
|
133
|
+
## 📄 License
|
|
134
|
+
|
|
135
|
+
This project is licensed under the MIT License.
|
|
136
|
+
|
|
137
|
+
## 🤝 Contributing
|
|
138
|
+
|
|
139
|
+
We welcome contributions! Please feel free to:
|
|
140
|
+
- Submit bug reports
|
|
141
|
+
- Request new features
|
|
142
|
+
- Contribute code improvements
|
|
143
|
+
- Improve documentation
|
|
144
|
+
|
|
145
|
+
## 🔄 Updates
|
|
146
|
+
|
|
147
|
+
The widget automatically updates when you use the `@latest` tag. For version-specific deployments, use:
|
|
148
|
+
|
|
149
|
+
```html
|
|
150
|
+
<div id="dori-react-widget-host"></div>
|
|
151
|
+
<script
|
|
152
|
+
id="dori-react-widget"
|
|
153
|
+
data-sharing-id="your-id"
|
|
154
|
+
src="https://cdn.jsdelivr.net/npm/mori-chat-widget@1.0.0/dist/widget.js"
|
|
155
|
+
></script>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
---
|
|
159
|
+
|
|
160
|
+
**Mori Chat Widget** - Making customer support smarter and more engaging.
|