ai-chatbot-widget 0.1.2 → 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 +134 -54
- package/dist/chatbot-widget.es.js +9177 -8498
- package/dist/chatbot-widget.iife.js +83 -82
- package/dist/index.css +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -4,20 +4,33 @@ This chatbot widget was developed for [Agile Alpaca](https://agile-alpaca.com) c
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
- [
|
|
12
|
-
- [
|
|
7
|
+
## Stores Using This Widget
|
|
8
|
+
|
|
9
|
+
Last update: **April 3, 2026**.
|
|
10
|
+
|
|
11
|
+
- [bsign-store.com](https://bsign-store.com/) - Manufacturer of custom door signs and modern door numbers made from metal, wood, and acrylic for homes, offices, apartments, and hotels.
|
|
12
|
+
- [bsign-store.com.ua](https://bsign-store.com.ua/) - Ukrainian storefront of BSign focused on interior door signs and room numbers for homes, offices, and hospitality spaces.
|
|
13
|
+
- [lemap.co](https://lemap.co/) - Store focused on travel-themed wall maps, especially national park maps and related decor/sign products.
|
|
14
|
+
- [dfadecor.com](https://dfadecor.com/) - Interior decor shop with reusable wall stencils, mirror strips, and imprint tools for decorative wall finishing.
|
|
15
|
+
- [evenwood.com.ua](https://evenwood.com.ua/) - Ukrainian handmade wooden decor and home-organization products, including planters, shelves, and shoe storage.
|
|
16
|
+
- [ndukraine.com](https://ndukraine.com/) - Ukrainian goods store selling embroidered clothing, accessories, and home decor with handmade focus.
|
|
17
|
+
- [buzzcrafts.art](https://buzzcrafts.art/) - Gift store centered on anniversary gifts by year and milestone-based present ideas.
|
|
18
|
+
|
|
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.
|
|
13
26
|
- [x] Welcome message
|
|
14
27
|
- [x] Previous dialogue restoration
|
|
15
28
|
- [x] Quick-reply prompts (chat prompts)
|
|
16
29
|
- [x] Page context (pageContext) – lets you run arbitrary scripts (e.g., auto-show the chat or display a personalized message) once a visitor has spent timer ms on a specific pathname.
|
|
17
30
|
- [x] Full control via context object – the execPageContext function provides external code with a complete set of setters (open, messageOptions, input, promptsOptions) plus a scrollToBottom method, simplifying integration with analytics or business logic.
|
|
18
31
|
- [x] Input with Shift+Enter support – pressing Enter sends a message; Shift+Enter inserts a newline.
|
|
19
|
-
- [x] Configurable input position - place input on top and header on bottom with props.
|
|
20
|
-
- [x] Automatic scroll to the latest message
|
|
32
|
+
- [x] Configurable input position - place input on top and header on bottom with props.
|
|
33
|
+
- [x] Automatic scroll to the latest message
|
|
21
34
|
- [x] Responsive design
|
|
22
35
|
- [ ] Full-page context handling – ability to send the entire page context to the server along with the user’s message.
|
|
23
36
|
|
|
@@ -36,7 +49,7 @@ The widget uses the same URL for both read/send operations and sends requests wi
|
|
|
36
49
|
```json
|
|
37
50
|
{
|
|
38
51
|
"data": {
|
|
39
|
-
"sessionUuid": "uuid",
|
|
52
|
+
"sessionUuid": "uuid",
|
|
40
53
|
"createdAt": "ISO date",
|
|
41
54
|
"messages": [
|
|
42
55
|
{
|
|
@@ -67,7 +80,7 @@ The widget uses the same URL for both read/send operations and sends requests wi
|
|
|
67
80
|
```json
|
|
68
81
|
{
|
|
69
82
|
"data": {
|
|
70
|
-
"sessionUuid": "uuid",
|
|
83
|
+
"sessionUuid": "uuid",
|
|
71
84
|
"input": {},
|
|
72
85
|
"output": {
|
|
73
86
|
"text": "Bot reply"
|
|
@@ -88,11 +101,10 @@ Minimal required CORS headers in API response:
|
|
|
88
101
|
- `Access-Control-Allow-Headers: Content-Type` (or requested headers)
|
|
89
102
|
|
|
90
103
|
## Usage
|
|
91
|
-
```html
|
|
92
|
-
<head>
|
|
93
|
-
<!-- ... -->
|
|
94
|
-
|
|
95
|
-
</head>
|
|
104
|
+
```html
|
|
105
|
+
<head>
|
|
106
|
+
<!-- ... -->
|
|
107
|
+
</head>
|
|
96
108
|
|
|
97
109
|
<body>
|
|
98
110
|
<!-- ... -->
|
|
@@ -118,17 +130,26 @@ Thank you for reaching out! 💬`
|
|
|
118
130
|
'I have problem with my order'
|
|
119
131
|
]
|
|
120
132
|
|
|
121
|
-
ChatbotWidget.mountChatbotWidget("#chatbot", {
|
|
122
|
-
apiBaseUrl: 'https://api.example.com',
|
|
123
|
-
greeting,
|
|
124
|
-
chatPrompts,
|
|
125
|
-
|
|
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
|
|
126
147
|
position: {
|
|
127
148
|
mode: 'trigger' // opens the chat near the openTriggerId element
|
|
128
|
-
},
|
|
129
|
-
messageInputPosition: 'top', // optional: top input + bottom header + newest messages on top
|
|
130
|
-
|
|
131
|
-
title: 'Bsign Assistant',
|
|
149
|
+
},
|
|
150
|
+
messageInputPosition: 'top', // optional: top input + bottom header + newest messages on top
|
|
151
|
+
|
|
152
|
+
title: 'Bsign Assistant',
|
|
132
153
|
imageUrl: 'https://cdn.shopify.com/s/files/1/0248/8198/7665/files/chatbot-logo.png?v=1750682293',
|
|
133
154
|
imageWidth: '120px',
|
|
134
155
|
|
|
@@ -143,16 +164,45 @@ Thank you for reaching out! 💬`
|
|
|
143
164
|
])
|
|
144
165
|
open.setIsOpen(true);
|
|
145
166
|
}
|
|
146
|
-
}
|
|
147
|
-
},
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
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.
|
|
156
206
|
|
|
157
207
|
When this prop is used, the built-in floating open button and notification badge are not rendered.
|
|
158
208
|
|
|
@@ -204,34 +254,64 @@ position: {
|
|
|
204
254
|
}
|
|
205
255
|
```
|
|
206
256
|
|
|
207
|
-
Open near trigger example:
|
|
257
|
+
Open near trigger example:
|
|
258
|
+
```typescript
|
|
259
|
+
openTriggerId: 'open-chatbot-btn',
|
|
260
|
+
position: {
|
|
261
|
+
mode: 'trigger',
|
|
262
|
+
gap: 10,
|
|
263
|
+
offsetY: -20
|
|
264
|
+
}
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
### Input position
|
|
268
|
+
|
|
269
|
+
Use `messageInputPosition` to control where the input lives.
|
|
270
|
+
|
|
271
|
+
```typescript
|
|
272
|
+
messageInputPosition?: 'bottom' | 'top'
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
- `'bottom'` (default): header is on top, input is on bottom, newest messages appear at the bottom.
|
|
276
|
+
- `'top'`: input is on top, header moves to bottom, newest messages appear at the top.
|
|
277
|
+
|
|
278
|
+
### Themes
|
|
279
|
+
|
|
280
|
+
Available presets: `futuristic`, `lighty`, `boring`, `o Canada`.
|
|
281
|
+
|
|
282
|
+
You can pass `theme` as:
|
|
283
|
+
|
|
284
|
+
- a preset string:
|
|
285
|
+
|
|
208
286
|
```typescript
|
|
209
|
-
|
|
210
|
-
position: {
|
|
211
|
-
mode: 'trigger',
|
|
212
|
-
gap: 10,
|
|
213
|
-
offsetY: -20
|
|
214
|
-
}
|
|
287
|
+
theme: 'futuristic'
|
|
215
288
|
```
|
|
216
289
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
Use `messageInputPosition` to control where the input lives.
|
|
290
|
+
- or a config object with preset + token overrides:
|
|
220
291
|
|
|
221
292
|
```typescript
|
|
222
|
-
|
|
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
|
+
}
|
|
223
303
|
```
|
|
224
304
|
|
|
225
|
-
|
|
226
|
-
- `'top'`: input is on top, header moves to bottom, newest messages appear at the top.
|
|
305
|
+
Additionally, `themeTokens` can override tokens on top of `theme`:
|
|
227
306
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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.
|
|
235
315
|
|
|
236
316
|
#### lighty
|
|
237
317
|
|