ai-chatbot-widget 0.1.0 → 0.1.2
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 +89 -33
- package/dist/chatbot-widget.es.js +5090 -4916
- package/dist/chatbot-widget.iife.js +87 -86
- package/dist/index.css +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -8,17 +8,20 @@ This chatbot widget was developed for [Agile Alpaca](https://agile-alpaca.com) c
|
|
|
8
8
|
- [x] Theme customization – the theme parameter applies predefined styles that change the background, button, and message-bubble colors.
|
|
9
9
|
- [x] Animated popup window – the chat window is anchored to the bottom-right corner and opens/collapses with smooth animation.
|
|
10
10
|
- [x] Open button + message badge
|
|
11
|
+
- [x] External open trigger by element `id`
|
|
12
|
+
- [x] Flexible widget positioning (screen presets, fixed coordinates, or near trigger)
|
|
11
13
|
- [x] Welcome message
|
|
12
14
|
- [x] Previous dialogue restoration
|
|
13
15
|
- [x] Quick-reply prompts (chat prompts)
|
|
14
16
|
- [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
17
|
- [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
18
|
- [x] Input with Shift+Enter support – pressing Enter sends a message; Shift+Enter inserts a newline.
|
|
17
|
-
- [x]
|
|
19
|
+
- [x] Configurable input position - place input on top and header on bottom with props.
|
|
20
|
+
- [x] Automatic scroll to the latest message
|
|
18
21
|
- [x] Responsive design
|
|
19
22
|
- [ ] Full-page context handling – ability to send the entire page context to the server along with the user’s message.
|
|
20
23
|
|
|
21
|
-
## Required API
|
|
24
|
+
## Required API
|
|
22
25
|
|
|
23
26
|
`apiBaseUrl` must point to a specific public chat endpoint.
|
|
24
27
|
|
|
@@ -94,6 +97,7 @@ Minimal required CORS headers in API response:
|
|
|
94
97
|
<body>
|
|
95
98
|
<!-- ... -->
|
|
96
99
|
|
|
100
|
+
<button id="open-chatbot-btn">Open chat</button>
|
|
97
101
|
<div id="chatbot"></div>
|
|
98
102
|
|
|
99
103
|
<script src="https://cdn.jsdelivr.net/npm/ai-chatbot-widget@latest/dist/chatbot-widget.iife.js"></script>
|
|
@@ -118,8 +122,13 @@ Thank you for reaching out! 💬`
|
|
|
118
122
|
apiBaseUrl: 'https://api.example.com',
|
|
119
123
|
greeting,
|
|
120
124
|
chatPrompts,
|
|
121
|
-
|
|
122
|
-
|
|
125
|
+
openTriggerId: 'open-chatbot-btn', // optional: use your own trigger element
|
|
126
|
+
position: {
|
|
127
|
+
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',
|
|
123
132
|
imageUrl: 'https://cdn.shopify.com/s/files/1/0248/8198/7665/files/chatbot-logo.png?v=1750682293',
|
|
124
133
|
imageWidth: '120px',
|
|
125
134
|
|
|
@@ -141,7 +150,82 @@ Thank you for reaching out! 💬`
|
|
|
141
150
|
</body>
|
|
142
151
|
```
|
|
143
152
|
|
|
144
|
-
###
|
|
153
|
+
### Custom open trigger
|
|
154
|
+
|
|
155
|
+
If `openTriggerId` is provided, the widget listens for clicks on that element and opens the dialog.
|
|
156
|
+
|
|
157
|
+
When this prop is used, the built-in floating open button and notification badge are not rendered.
|
|
158
|
+
|
|
159
|
+
### Positioning
|
|
160
|
+
|
|
161
|
+
Use the optional `position` prop for flexible placement.
|
|
162
|
+
|
|
163
|
+
```typescript
|
|
164
|
+
position?: {
|
|
165
|
+
mode?: 'preset' | 'coordinates' | 'trigger';
|
|
166
|
+
|
|
167
|
+
// preset mode
|
|
168
|
+
preset?:
|
|
169
|
+
| 'bottom-right'
|
|
170
|
+
| 'bottom-left'
|
|
171
|
+
| 'top-right'
|
|
172
|
+
| 'top-left'
|
|
173
|
+
| 'bottom-center'
|
|
174
|
+
| 'top-center'
|
|
175
|
+
| 'center-right'
|
|
176
|
+
| 'center-left'
|
|
177
|
+
| 'center';
|
|
178
|
+
|
|
179
|
+
// coordinates mode
|
|
180
|
+
x?: number | string; // e.g. 24 or '24px'
|
|
181
|
+
y?: number | string; // e.g. 120 or '120px'
|
|
182
|
+
|
|
183
|
+
// trigger mode (near openTriggerId element)
|
|
184
|
+
gap?: number; // distance from trigger to chat window, px
|
|
185
|
+
offsetX?: number; // additional horizontal offset, px
|
|
186
|
+
offsetY?: number; // additional vertical offset, px
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
Preset area example:
|
|
191
|
+
```typescript
|
|
192
|
+
position: {
|
|
193
|
+
mode: 'preset',
|
|
194
|
+
preset: 'top-left'
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
Fixed coordinates example:
|
|
199
|
+
```typescript
|
|
200
|
+
position: {
|
|
201
|
+
mode: 'coordinates',
|
|
202
|
+
x: 40,
|
|
203
|
+
y: 140
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
Open near trigger example:
|
|
208
|
+
```typescript
|
|
209
|
+
openTriggerId: 'open-chatbot-btn',
|
|
210
|
+
position: {
|
|
211
|
+
mode: 'trigger',
|
|
212
|
+
gap: 10,
|
|
213
|
+
offsetY: -20
|
|
214
|
+
}
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
### Input position
|
|
218
|
+
|
|
219
|
+
Use `messageInputPosition` to control where the input lives.
|
|
220
|
+
|
|
221
|
+
```typescript
|
|
222
|
+
messageInputPosition?: 'bottom' | 'top'
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
- `'bottom'` (default): header is on top, input is on bottom, newest messages appear at the bottom.
|
|
226
|
+
- `'top'`: input is on top, header moves to bottom, newest messages appear at the top.
|
|
227
|
+
|
|
228
|
+
### Themes
|
|
145
229
|
|
|
146
230
|
Avaible themes: `futuristic`, `lighty`, `boring`, `o Canada`.
|
|
147
231
|
|
|
@@ -153,46 +237,18 @@ There is currently no solution for creating custom themes by passing props. If n
|
|
|
153
237
|
|
|
154
238
|
|
|
155
239
|
|
|
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
240
|
#### boring
|
|
164
241
|
|
|
165
242
|
|
|
166
243
|
|
|
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
244
|
#### futuristic
|
|
175
245
|
|
|
176
246
|
|
|
177
247
|
|
|
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
248
|
#### o Canada
|
|
186
249
|
|
|
187
250
|
|
|
188
251
|
|
|
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
252
|
### Widget context
|
|
197
253
|
|
|
198
254
|
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).
|