@kvsnguyen/chatbot-widget 0.0.5 → 0.0.7
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 +94 -14
- package/package.json +1 -1
- package/dist/widget.d.ts +0 -2
package/README.md
CHANGED
|
@@ -1,28 +1,108 @@
|
|
|
1
1
|
# Chatbot Widget
|
|
2
2
|
|
|
3
|
-
A lightweight **AI Chatbot UI widget** that can be easily embedded into any website via
|
|
4
|
-
This project provides a **bubble chat** at the bottom-right corner with a mock AI backend.
|
|
3
|
+
A lightweight **AI Chatbot UI widget** that can be easily embedded into any website via **CDN** or **npm package**.
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
This version **auto-mounts** on page load — no need to call `init()`. It comes with a floating chat bubble at the bottom-right corner and a mock AI backend for testing.
|
|
7
6
|
|
|
8
7
|
---
|
|
9
8
|
|
|
10
9
|
## Features
|
|
11
10
|
|
|
12
|
-
- Floating chat bubble, fixed
|
|
13
|
-
- Expandable chat panel
|
|
14
|
-
- Mock AI replies
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
11
|
+
- Floating chat bubble, fixed position
|
|
12
|
+
- Expandable chat panel
|
|
13
|
+
- Mock AI replies (can replace with your API)
|
|
14
|
+
- Auto-mount, no `init()` needed
|
|
15
|
+
- CDN ready or npm install
|
|
16
|
+
- Fully customizable styling, theme, and position
|
|
17
|
+
- React + ReactDOM bundled for standalone usage
|
|
18
18
|
|
|
19
19
|
---
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## 1️⃣ Use via CDN
|
|
22
|
+
|
|
23
|
+
Copy-paste **1 script tag** into your HTML:
|
|
22
24
|
|
|
23
25
|
```html
|
|
24
|
-
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
<!DOCTYPE html>
|
|
27
|
+
<html lang="en">
|
|
28
|
+
<head>
|
|
29
|
+
<meta charset="UTF-8" />
|
|
30
|
+
<title>Chatbot Test</title>
|
|
31
|
+
</head>
|
|
32
|
+
<body>
|
|
33
|
+
Hello world
|
|
34
|
+
|
|
35
|
+
<!-- Chatbot Widget -->
|
|
36
|
+
<script src="https://cdn.jsdelivr.net/npm/@kvsnguyen/chatbot-widget/dist/widget.global.js"></script>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
|
28
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.
|
package/package.json
CHANGED
package/dist/widget.d.ts
DELETED