ai-chatbot-widget 0.1.1 → 0.1.3
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 +97 -29
- package/dist/chatbot-widget.es.js +7181 -6485
- package/dist/chatbot-widget.iife.js +84 -82
- package/dist/index.css +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -4,21 +4,36 @@ This chatbot widget was developed for [Agile Alpaca](https://agile-alpaca.com) c
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
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
|
+
|
|
7
19
|
## Features
|
|
8
20
|
- [x] Theme customization – the theme parameter applies predefined styles that change the background, button, and message-bubble colors.
|
|
9
21
|
- [x] Animated popup window – the chat window is anchored to the bottom-right corner and opens/collapses with smooth animation.
|
|
10
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)
|
|
11
25
|
- [x] Welcome message
|
|
12
26
|
- [x] Previous dialogue restoration
|
|
13
27
|
- [x] Quick-reply prompts (chat prompts)
|
|
14
28
|
- [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.
|
|
15
29
|
- [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.
|
|
16
30
|
- [x] Input with Shift+Enter support – pressing Enter sends a message; Shift+Enter inserts a newline.
|
|
31
|
+
- [x] Configurable input position - place input on top and header on bottom with props.
|
|
17
32
|
- [x] Automatic scroll to the latest message
|
|
18
33
|
- [x] Responsive design
|
|
19
34
|
- [ ] Full-page context handling – ability to send the entire page context to the server along with the user’s message.
|
|
20
35
|
|
|
21
|
-
## Required API
|
|
36
|
+
## Required API
|
|
22
37
|
|
|
23
38
|
`apiBaseUrl` must point to a specific public chat endpoint.
|
|
24
39
|
|
|
@@ -94,6 +109,7 @@ Minimal required CORS headers in API response:
|
|
|
94
109
|
<body>
|
|
95
110
|
<!-- ... -->
|
|
96
111
|
|
|
112
|
+
<button id="open-chatbot-btn">Open chat</button>
|
|
97
113
|
<div id="chatbot"></div>
|
|
98
114
|
|
|
99
115
|
<script src="https://cdn.jsdelivr.net/npm/ai-chatbot-widget@latest/dist/chatbot-widget.iife.js"></script>
|
|
@@ -118,6 +134,11 @@ Thank you for reaching out! 💬`
|
|
|
118
134
|
apiBaseUrl: 'https://api.example.com',
|
|
119
135
|
greeting,
|
|
120
136
|
chatPrompts,
|
|
137
|
+
openTriggerId: 'open-chatbot-btn', // optional: use your own trigger element
|
|
138
|
+
position: {
|
|
139
|
+
mode: 'trigger' // opens the chat near the openTriggerId element
|
|
140
|
+
},
|
|
141
|
+
messageInputPosition: 'top', // optional: top input + bottom header + newest messages on top
|
|
121
142
|
|
|
122
143
|
title: 'Bsign Assistant',
|
|
123
144
|
imageUrl: 'https://cdn.shopify.com/s/files/1/0248/8198/7665/files/chatbot-logo.png?v=1750682293',
|
|
@@ -141,6 +162,81 @@ Thank you for reaching out! 💬`
|
|
|
141
162
|
</body>
|
|
142
163
|
```
|
|
143
164
|
|
|
165
|
+
### Custom open trigger
|
|
166
|
+
|
|
167
|
+
If `openTriggerId` is provided, the widget listens for clicks on that element and opens the dialog.
|
|
168
|
+
|
|
169
|
+
When this prop is used, the built-in floating open button and notification badge are not rendered.
|
|
170
|
+
|
|
171
|
+
### Positioning
|
|
172
|
+
|
|
173
|
+
Use the optional `position` prop for flexible placement.
|
|
174
|
+
|
|
175
|
+
```typescript
|
|
176
|
+
position?: {
|
|
177
|
+
mode?: 'preset' | 'coordinates' | 'trigger';
|
|
178
|
+
|
|
179
|
+
// preset mode
|
|
180
|
+
preset?:
|
|
181
|
+
| 'bottom-right'
|
|
182
|
+
| 'bottom-left'
|
|
183
|
+
| 'top-right'
|
|
184
|
+
| 'top-left'
|
|
185
|
+
| 'bottom-center'
|
|
186
|
+
| 'top-center'
|
|
187
|
+
| 'center-right'
|
|
188
|
+
| 'center-left'
|
|
189
|
+
| 'center';
|
|
190
|
+
|
|
191
|
+
// coordinates mode
|
|
192
|
+
x?: number | string; // e.g. 24 or '24px'
|
|
193
|
+
y?: number | string; // e.g. 120 or '120px'
|
|
194
|
+
|
|
195
|
+
// trigger mode (near openTriggerId element)
|
|
196
|
+
gap?: number; // distance from trigger to chat window, px
|
|
197
|
+
offsetX?: number; // additional horizontal offset, px
|
|
198
|
+
offsetY?: number; // additional vertical offset, px
|
|
199
|
+
}
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
Preset area example:
|
|
203
|
+
```typescript
|
|
204
|
+
position: {
|
|
205
|
+
mode: 'preset',
|
|
206
|
+
preset: 'top-left'
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
Fixed coordinates example:
|
|
211
|
+
```typescript
|
|
212
|
+
position: {
|
|
213
|
+
mode: 'coordinates',
|
|
214
|
+
x: 40,
|
|
215
|
+
y: 140
|
|
216
|
+
}
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
Open near trigger example:
|
|
220
|
+
```typescript
|
|
221
|
+
openTriggerId: 'open-chatbot-btn',
|
|
222
|
+
position: {
|
|
223
|
+
mode: 'trigger',
|
|
224
|
+
gap: 10,
|
|
225
|
+
offsetY: -20
|
|
226
|
+
}
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### Input position
|
|
230
|
+
|
|
231
|
+
Use `messageInputPosition` to control where the input lives.
|
|
232
|
+
|
|
233
|
+
```typescript
|
|
234
|
+
messageInputPosition?: 'bottom' | 'top'
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
- `'bottom'` (default): header is on top, input is on bottom, newest messages appear at the bottom.
|
|
238
|
+
- `'top'`: input is on top, header moves to bottom, newest messages appear at the top.
|
|
239
|
+
|
|
144
240
|
### Themes
|
|
145
241
|
|
|
146
242
|
Avaible themes: `futuristic`, `lighty`, `boring`, `o Canada`.
|
|
@@ -153,46 +249,18 @@ There is currently no solution for creating custom themes by passing props. If n
|
|
|
153
249
|
|
|
154
250
|
|
|
155
251
|
|
|
156
|
-
The “lighty” theme combines minimalism with vibrant accents:
|
|
157
|
-
- A clean white background makes the interface feel light and airy.
|
|
158
|
-
- A contrasting dark header adds structure and focuses attention on navigation.
|
|
159
|
-
- Gradiented bot messages in purple-pink hues enliven the space without overwhelming it.
|
|
160
|
-
- Black-and-white user messages (with subtle transparency) maintain a sleek look.
|
|
161
|
-
- Buttons and input fields feature delicate purple outlines for a modern yet refined style.
|
|
162
|
-
|
|
163
252
|
#### boring
|
|
164
253
|
|
|
165
254
|
|
|
166
255
|
|
|
167
|
-
The “boring” theme offers a maximally neutral and formal interface:
|
|
168
|
-
- A pure white background and a solid dark header (no gradients) create a very simple backdrop.
|
|
169
|
-
- Bot messages in dark gray blocks with white text look like a classic terminal chat.
|
|
170
|
-
- User messages and icons are in black without any color accents—utterly restrained.
|
|
171
|
-
- Inputs and buttons have thin gray borders that barely draw attention.
|
|
172
|
-
- This style suits corporate or internal tools where functionality matters more than aesthetics.
|
|
173
|
-
|
|
174
256
|
#### futuristic
|
|
175
257
|
|
|
176
258
|
|
|
177
259
|
|
|
178
|
-
The “futuristic” theme plunges you into a cyberpunk, sci-fi world:
|
|
179
|
-
- A deep gradient from dark slate through purple to near-black evokes the infinity of space.
|
|
180
|
-
- Bright purple-to-blue accents in the header and open button emit neon energy.
|
|
181
|
-
- Bot messages in warm purple-pink gradients with white text resemble holograms.
|
|
182
|
-
- Semi-transparent, heavily blurred user message backgrounds create a digital cocoon.
|
|
183
|
-
- Glow effects on the open button and notification badge complete the high-tech vibe.
|
|
184
|
-
|
|
185
260
|
#### o Canada
|
|
186
261
|
|
|
187
262
|
|
|
188
263
|
|
|
189
|
-
The “o Canada” theme embodies nature and stability:
|
|
190
|
-
- A white background recalls Canadian forests, snowy landscapes, and purity.
|
|
191
|
-
- The header and bot elements use a deep green (#016553), reminiscent of evergreen woods.
|
|
192
|
-
- The gold notification badge (#D1A205) symbolizes the warm hues of sunlight over the plains.
|
|
193
|
-
- User messages and input fields remain understated so nothing distracts from the core content.
|
|
194
|
-
- This style works well for eco-friendly, educational, or official projects that value trust and reliability.
|
|
195
|
-
|
|
196
264
|
### Widget context
|
|
197
265
|
|
|
198
266
|
One of the chatbot’s most important features is its ability to manipulate widget states based on the page context (and this functionality will only expand over time).
|