@kvsnguyen/chatbot-widget 0.0.7 → 0.0.8
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 +0 -69
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,72 +37,3 @@ Copy-paste **1 script tag** into your HTML:
|
|
|
37
37
|
</body>
|
|
38
38
|
</html>
|
|
39
39
|
```
|
|
40
|
-
|
|
41
|
-
2️⃣ Use via npm package
|
|
42
|
-
|
|
43
|
-
Install the package:
|
|
44
|
-
|
|
45
|
-
npm install @kvsnguyen/chatbot-widget
|
|
46
|
-
|
|
47
|
-
Import and use in your React / Next.js project:
|
|
48
|
-
|
|
49
|
-
import { useEffect } from 'react'
|
|
50
|
-
import '@kvsnguyen/chatbot-widget/dist/widget.global.js' // imports and auto-mounts
|
|
51
|
-
|
|
52
|
-
export default function App() {
|
|
53
|
-
useEffect(() => {
|
|
54
|
-
// ChatWidget auto mounts on page load, nothing else required
|
|
55
|
-
}, [])
|
|
56
|
-
|
|
57
|
-
return <div>Your App</div>
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
The widget is already bundled with React + ReactDOM.
|
|
61
|
-
|
|
62
|
-
No need to call any init() function.
|
|
63
|
-
|
|
64
|
-
3️⃣ Development
|
|
65
|
-
|
|
66
|
-
Clone the repo:
|
|
67
|
-
|
|
68
|
-
git clone <repo-url>
|
|
69
|
-
cd chatbot-widget
|
|
70
|
-
npm install
|
|
71
|
-
|
|
72
|
-
Build the widget:
|
|
73
|
-
|
|
74
|
-
npm run build
|
|
75
|
-
|
|
76
|
-
Output bundle:
|
|
77
|
-
|
|
78
|
-
dist/widget.global.js
|
|
79
|
-
|
|
80
|
-
Ready to test locally or publish to npm/CDN.
|
|
81
|
-
|
|
82
|
-
4️⃣ Publish to npm
|
|
83
|
-
|
|
84
|
-
Make sure "private": false in package.json.
|
|
85
|
-
|
|
86
|
-
Build: npm run build
|
|
87
|
-
|
|
88
|
-
Publish:
|
|
89
|
-
|
|
90
|
-
npm publish --access public
|
|
91
|
-
|
|
92
|
-
⚠️ If using a scoped package (e.g., @kvsnguyen/chatbot-widget), always include --access public.
|
|
93
|
-
|
|
94
|
-
5️⃣ Customization
|
|
95
|
-
|
|
96
|
-
Bubble icon: modify in src/ChatWidget.tsx
|
|
97
|
-
|
|
98
|
-
Chat window style: inline styles or CSS-in-JS
|
|
99
|
-
|
|
100
|
-
AI backend: replace mockReply() function in ChatWidget.tsx
|
|
101
|
-
|
|
102
|
-
6️⃣ Notes
|
|
103
|
-
|
|
104
|
-
Designed for easy embedding via CDN or npm.
|
|
105
|
-
|
|
106
|
-
Auto-mount feature makes it copy-paste ready.
|
|
107
|
-
|
|
108
|
-
Types are included for npm package usage.
|