ai-chatbot-widget 0.1.3 → 0.1.4
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 +105 -37
- package/dist/chatbot-widget.es.js +8222 -8098
- package/dist/chatbot-widget.iife.js +79 -79
- package/dist/index.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,12 +16,13 @@ Last update: **April 3, 2026**.
|
|
|
16
16
|
- [ndukraine.com](https://ndukraine.com/) - Ukrainian goods store selling embroidered clothing, accessories, and home decor with handmade focus.
|
|
17
17
|
- [buzzcrafts.art](https://buzzcrafts.art/) - Gift store centered on anniversary gifts by year and milestone-based present ideas.
|
|
18
18
|
|
|
19
|
-
## Features
|
|
20
|
-
- [x]
|
|
21
|
-
- [x] Animated popup window – the chat window is anchored to the bottom-right corner and opens/collapses with smooth animation.
|
|
22
|
-
- [x] Open button + message badge
|
|
23
|
-
- [x] External open trigger by element `id`
|
|
24
|
-
- [x] Flexible widget positioning (screen presets, fixed coordinates, or near trigger)
|
|
19
|
+
## Features
|
|
20
|
+
- [x] Token-based theming (`theme` presets + `themeTokens` overrides + CSS variables).
|
|
21
|
+
- [x] Animated popup window – the chat window is anchored to the bottom-right corner and opens/collapses with smooth animation.
|
|
22
|
+
- [x] Open button + message badge
|
|
23
|
+
- [x] External open trigger by element `id`
|
|
24
|
+
- [x] Flexible widget positioning (screen presets, fixed coordinates, or near trigger)
|
|
25
|
+
- [x] Style isolation by default (Shadow DOM mount) to avoid host CSS collisions.
|
|
25
26
|
- [x] Welcome message
|
|
26
27
|
- [x] Previous dialogue restoration
|
|
27
28
|
- [x] Quick-reply prompts (chat prompts)
|
|
@@ -48,7 +49,7 @@ The widget uses the same URL for both read/send operations and sends requests wi
|
|
|
48
49
|
```json
|
|
49
50
|
{
|
|
50
51
|
"data": {
|
|
51
|
-
"sessionUuid": "uuid",
|
|
52
|
+
"sessionUuid": "uuid",
|
|
52
53
|
"createdAt": "ISO date",
|
|
53
54
|
"messages": [
|
|
54
55
|
{
|
|
@@ -79,7 +80,7 @@ The widget uses the same URL for both read/send operations and sends requests wi
|
|
|
79
80
|
```json
|
|
80
81
|
{
|
|
81
82
|
"data": {
|
|
82
|
-
"sessionUuid": "uuid",
|
|
83
|
+
"sessionUuid": "uuid",
|
|
83
84
|
"input": {},
|
|
84
85
|
"output": {
|
|
85
86
|
"text": "Bot reply"
|
|
@@ -100,11 +101,10 @@ Minimal required CORS headers in API response:
|
|
|
100
101
|
- `Access-Control-Allow-Headers: Content-Type` (or requested headers)
|
|
101
102
|
|
|
102
103
|
## Usage
|
|
103
|
-
```html
|
|
104
|
-
<head>
|
|
105
|
-
<!-- ... -->
|
|
106
|
-
|
|
107
|
-
</head>
|
|
104
|
+
```html
|
|
105
|
+
<head>
|
|
106
|
+
<!-- ... -->
|
|
107
|
+
</head>
|
|
108
108
|
|
|
109
109
|
<body>
|
|
110
110
|
<!-- ... -->
|
|
@@ -130,13 +130,22 @@ Thank you for reaching out! 💬`
|
|
|
130
130
|
'I have problem with my order'
|
|
131
131
|
]
|
|
132
132
|
|
|
133
|
-
ChatbotWidget.mountChatbotWidget("#chatbot", {
|
|
134
|
-
apiBaseUrl: 'https://api.example.com',
|
|
135
|
-
greeting,
|
|
136
|
-
chatPrompts,
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
133
|
+
ChatbotWidget.mountChatbotWidget("#chatbot", {
|
|
134
|
+
apiBaseUrl: 'https://api.example.com',
|
|
135
|
+
greeting,
|
|
136
|
+
chatPrompts,
|
|
137
|
+
theme: {
|
|
138
|
+
preset: 'boring',
|
|
139
|
+
tokens: {
|
|
140
|
+
headerBackground: 'linear-gradient(90deg, #0f172a, #1e293b)',
|
|
141
|
+
openButtonBackground: '#0f172a',
|
|
142
|
+
openButtonColor: '#ffffff',
|
|
143
|
+
badgeBackground: '#f97316'
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
openTriggerId: 'open-chatbot-btn', // optional: use your own trigger element
|
|
147
|
+
position: {
|
|
148
|
+
mode: 'trigger' // opens the chat near the openTriggerId element
|
|
140
149
|
},
|
|
141
150
|
messageInputPosition: 'top', // optional: top input + bottom header + newest messages on top
|
|
142
151
|
|
|
@@ -155,16 +164,45 @@ Thank you for reaching out! 💬`
|
|
|
155
164
|
])
|
|
156
165
|
open.setIsOpen(true);
|
|
157
166
|
}
|
|
158
|
-
}
|
|
159
|
-
},
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
themeTokens: {
|
|
170
|
+
promptBackground: 'rgba(15, 23, 42, 0.9)'
|
|
171
|
+
}
|
|
172
|
+
}, {
|
|
173
|
+
// default is true
|
|
174
|
+
isolateStyles: true
|
|
175
|
+
});
|
|
176
|
+
</script>
|
|
177
|
+
</body>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### Style isolation (default)
|
|
181
|
+
|
|
182
|
+
`mountChatbotWidget(..., ..., { isolateStyles: true })` is the default behavior.
|
|
183
|
+
|
|
184
|
+
In this mode, the widget is rendered inside a Shadow DOM root:
|
|
185
|
+
|
|
186
|
+
- global host-site CSS does not accidentally override widget styles;
|
|
187
|
+
- widget CSS does not leak and override unrelated site elements.
|
|
188
|
+
|
|
189
|
+
If you intentionally want regular DOM styling (for example, global overrides from your stylesheet), pass:
|
|
190
|
+
|
|
191
|
+
```typescript
|
|
192
|
+
ChatbotWidget.mountChatbotWidget('#chatbot', props, {
|
|
193
|
+
isolateStyles: false
|
|
194
|
+
})
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
When `isolateStyles: false`, include widget CSS manually:
|
|
198
|
+
|
|
199
|
+
```html
|
|
200
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ai-chatbot-widget@latest/dist/index.css" />
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Custom open trigger
|
|
204
|
+
|
|
205
|
+
If `openTriggerId` is provided, the widget listens for clicks on that element and opens the dialog.
|
|
168
206
|
|
|
169
207
|
When this prop is used, the built-in floating open button and notification badge are not rendered.
|
|
170
208
|
|
|
@@ -237,13 +275,43 @@ messageInputPosition?: 'bottom' | 'top'
|
|
|
237
275
|
- `'bottom'` (default): header is on top, input is on bottom, newest messages appear at the bottom.
|
|
238
276
|
- `'top'`: input is on top, header moves to bottom, newest messages appear at the top.
|
|
239
277
|
|
|
240
|
-
### Themes
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
278
|
+
### Themes
|
|
279
|
+
|
|
280
|
+
Available presets: `futuristic`, `lighty`, `boring`, `o Canada`.
|
|
281
|
+
|
|
282
|
+
You can pass `theme` as:
|
|
283
|
+
|
|
284
|
+
- a preset string:
|
|
285
|
+
|
|
286
|
+
```typescript
|
|
287
|
+
theme: 'futuristic'
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
- or a config object with preset + token overrides:
|
|
291
|
+
|
|
292
|
+
```typescript
|
|
293
|
+
theme: {
|
|
294
|
+
preset: 'boring',
|
|
295
|
+
tokens: {
|
|
296
|
+
headerBackground: 'linear-gradient(90deg, #1f2937, #111827)',
|
|
297
|
+
botMessageBackground: '#111827',
|
|
298
|
+
botMessageTextColor: '#ffffff',
|
|
299
|
+
openButtonBackground: '#111827',
|
|
300
|
+
badgeBackground: '#22c55e'
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
Additionally, `themeTokens` can override tokens on top of `theme`:
|
|
306
|
+
|
|
307
|
+
```typescript
|
|
308
|
+
themeTokens: {
|
|
309
|
+
promptBackground: 'rgba(17, 24, 39, 0.92)',
|
|
310
|
+
promptTextColor: '#ffffff'
|
|
311
|
+
}
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
The widget uses CSS variables internally (`--ai-chatbot-*`), so you can also apply intentional host-level overrides by setting these variables on the mount target.
|
|
247
315
|
|
|
248
316
|
#### lighty
|
|
249
317
|
|