@headwai/chat-bubble 2.0.8 → 3.0.0
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.dev.md +1 -1
- package/README.md +59 -6
- package/dist-widget/chat-bubble.css +1 -1
- package/dist-widget/chat-bubble.js +256 -77
- package/package.json +3 -2
package/README.dev.md
CHANGED
|
@@ -39,7 +39,7 @@ npm run dev
|
|
|
39
39
|
http://localhost:5174/
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
7. Alternatively, build and test deployed
|
|
42
|
+
7. Alternatively, build and test deployed version:
|
|
43
43
|
[Build and Deploy](#build-and-deploy) and open `./test-widget.html` in a browser.
|
|
44
44
|
|
|
45
45
|
## Configuration
|
package/README.md
CHANGED
|
@@ -29,11 +29,14 @@ Add the Headwai Chat Bubble to the respective .html file.
|
|
|
29
29
|
placeholderText: 'Ask your question here!', // optional - default: 'Enter your questions here'
|
|
30
30
|
faviconPath: 'https://cdn.company.at/icons/favicon.svg', // optional - default: '/icons/favicon.svg'
|
|
31
31
|
initialMessage: 'Hey! My name is Supporty, how can I help you?', // optional - default: 'Hey, how can I help you?'
|
|
32
|
+
chatTitle: 'Customer Support', // optional - default: 'Headwai Chat Bubble'
|
|
32
33
|
userMessageBackgroundColor: '#007bff', // optional - default: '#007bff'
|
|
33
34
|
aiMessageBackgroundColor: '#f1f3f4', // optional - default: '#f1f3f4'
|
|
34
35
|
userMessageTextColor: '#000000', // optional - default: '#000000'
|
|
35
36
|
aiMessageTextColor: '#000000', // optional - default: '#000000'
|
|
36
|
-
faviconBackgroundColor: '#667eea' // optional - default: '#667eea'
|
|
37
|
+
faviconBackgroundColor: '#667eea', // optional - default: '#667eea'
|
|
38
|
+
fontFamily: '"Inter", system-ui, sans-serif', // optional - default: 'inherit'
|
|
39
|
+
fontSize: '16px' // optional - default: 'inherit'
|
|
37
40
|
};
|
|
38
41
|
</script>
|
|
39
42
|
</head>
|
|
@@ -80,11 +83,14 @@ For multiple instances use data attributes of the `<div>` tag for configuration
|
|
|
80
83
|
data-chat-bubble-placeholder-text="Ask your question here!"
|
|
81
84
|
data-chat-bubble-favicon-path="https://cdn.company.at/icons/favicon.svg"
|
|
82
85
|
data-chat-bubble-initial-message="Hey! My name is Supporty, how can I help you?"
|
|
86
|
+
data-chat-bubble-chat-title="Customer Support"
|
|
83
87
|
data-chat-bubble-user-message-background-color="#007bff"
|
|
84
88
|
data-chat-bubble-ai-message-background-color="#f1f3f4"
|
|
85
89
|
data-chat-bubble-user-message-text-color="#000000"
|
|
86
90
|
data-chat-bubble-ai-message-text-color="#000000"
|
|
87
|
-
data-chat-bubble-favicon-background-color="#667eea"
|
|
91
|
+
data-chat-bubble-favicon-background-color="#667eea"
|
|
92
|
+
data-chat-bubble-font-family='"Inter", system-ui, sans-serif'
|
|
93
|
+
data-chat-bubble-font-size="16px">
|
|
88
94
|
</div>
|
|
89
95
|
|
|
90
96
|
<!-- Another chat bubble with different config -->
|
|
@@ -96,11 +102,14 @@ For multiple instances use data attributes of the `<div>` tag for configuration
|
|
|
96
102
|
data-chat-bubble-placeholder-text="Ask about our FAQ..."
|
|
97
103
|
data-chat-bubble-favicon-path="https://cdn.company.at/icons/faq-icon.svg"
|
|
98
104
|
data-chat-bubble-initial-message="Hello! I can help you with frequently asked questions."
|
|
105
|
+
data-chat-bubble-chat-title="FAQ Assistant"
|
|
99
106
|
data-chat-bubble-user-message-background-color="#28a745"
|
|
100
107
|
data-chat-bubble-ai-message-background-color="#e9ecef"
|
|
101
108
|
data-chat-bubble-user-message-text-color="#ffffff"
|
|
102
109
|
data-chat-bubble-ai-message-text-color="#495057"
|
|
103
|
-
data-chat-bubble-favicon-background-color="#28a745"
|
|
110
|
+
data-chat-bubble-favicon-background-color="#28a745"
|
|
111
|
+
data-chat-bubble-font-family='"Roboto", sans-serif'
|
|
112
|
+
data-chat-bubble-font-size="14px">
|
|
104
113
|
</div>
|
|
105
114
|
|
|
106
115
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist-widget/chat-bubble.css">
|
|
@@ -189,6 +198,13 @@ An optional welcome message that appears when the chat is first opened. If not s
|
|
|
189
198
|
initialMessage: 'Hey! My name is Supporty, how can I help you?'
|
|
190
199
|
```
|
|
191
200
|
|
|
201
|
+
#### `chatTitle`
|
|
202
|
+
**Type:** `string` | **Default:** `'Headwai Chat Bubble'`
|
|
203
|
+
The title displayed in the chat window header at the top of the chat interface.
|
|
204
|
+
```javascript
|
|
205
|
+
chatTitle: 'Customer Support'
|
|
206
|
+
```
|
|
207
|
+
|
|
192
208
|
### Styling Configuration
|
|
193
209
|
|
|
194
210
|
#### `userMessageBackgroundColor`
|
|
@@ -200,7 +216,7 @@ userMessageBackgroundColor: '#007bff'
|
|
|
200
216
|
|
|
201
217
|
#### `aiMessageBackgroundColor`
|
|
202
218
|
**Type:** `string` | **Default:** `'#f1f3f4'`
|
|
203
|
-
Background color for messages sent by the
|
|
219
|
+
Background color for messages sent by the Headwai Chat Bubble. Accepts any valid CSS color value.
|
|
204
220
|
```javascript
|
|
205
221
|
aiMessageBackgroundColor: '#f1f3f4'
|
|
206
222
|
```
|
|
@@ -214,23 +230,60 @@ userMessageTextColor: '#ffffff'
|
|
|
214
230
|
|
|
215
231
|
#### `aiMessageTextColor`
|
|
216
232
|
**Type:** `string` | **Default:** `'#000000'`
|
|
217
|
-
Text color for
|
|
233
|
+
Text color for Headwai Chat Bubble messages. Accepts any valid CSS color value.
|
|
218
234
|
```javascript
|
|
219
235
|
aiMessageTextColor: '#333333'
|
|
220
236
|
```
|
|
221
237
|
|
|
222
238
|
#### `faviconBackgroundColor`
|
|
223
239
|
**Type:** `string` | **Default:** `'#667eea'`
|
|
224
|
-
Base color used for the assistant icon gradient. This color influences the overall appearance of the
|
|
240
|
+
Base color used for the assistant icon gradient. This color influences the overall appearance of the Headwai Chat Bubble's avatar.
|
|
225
241
|
```javascript
|
|
226
242
|
faviconBackgroundColor: '#667eea'
|
|
227
243
|
```
|
|
228
244
|
|
|
245
|
+
#### `fontFamily`
|
|
246
|
+
**Type:** `string` | **Default:** `'inherit'`
|
|
247
|
+
Font family used for all text in the chat interface, including messages and the input field. Accepts any valid CSS font-family value.
|
|
248
|
+
```javascript
|
|
249
|
+
fontFamily: '"Inter", system-ui, sans-serif'
|
|
250
|
+
fontFamily: '"Roboto", "Helvetica Neue", Arial, sans-serif'
|
|
251
|
+
fontFamily: 'system-ui, -apple-system, sans-serif'
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
**Note:** When using Google Fonts or other web fonts, make sure to include the appropriate `<link>` tag in your HTML `<head>` section:
|
|
255
|
+
```html
|
|
256
|
+
<head>
|
|
257
|
+
<!-- For Google Fonts -->
|
|
258
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
259
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
260
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
261
|
+
|
|
262
|
+
<!-- Your chat bubble configuration -->
|
|
263
|
+
<script>
|
|
264
|
+
window.HEADWAI_CHAT_BUBBLE_CONFIG = {
|
|
265
|
+
// ... other config
|
|
266
|
+
fontFamily: '"Inter", system-ui, sans-serif'
|
|
267
|
+
};
|
|
268
|
+
</script>
|
|
269
|
+
</head>
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
#### `fontSize`
|
|
273
|
+
**Type:** `string` | **Default:** `'inherit'`
|
|
274
|
+
Font size used for all text in the chat interface. Accepts any valid CSS font-size value.
|
|
275
|
+
```javascript
|
|
276
|
+
fontSize: '16px'
|
|
277
|
+
fontSize: '1rem'
|
|
278
|
+
fontSize: '14px'
|
|
279
|
+
```
|
|
280
|
+
|
|
229
281
|
### Data Attribute Format
|
|
230
282
|
|
|
231
283
|
When using data attributes for multiple chat bubbles, convert camelCase property names to kebab-case with the `data-chat-bubble-` prefix:
|
|
232
284
|
|
|
233
285
|
- `apiUrl` → `data-chat-bubble-api-url`
|
|
286
|
+
- `chatTitle` → `data-chat-bubble-chat-title`
|
|
234
287
|
- `userMessageBackgroundColor` → `data-chat-bubble-user-message-background-color`
|
|
235
288
|
- `initialMessage` → `data-chat-bubble-initial-message`
|
|
236
289
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
html,body{margin:0;padding:0;
|
|
1
|
+
html,body{margin:0;padding:0;width:100%;height:100%}main.svelte-4tgvxj.svelte-4tgvxj{font-family:sans-serif;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;padding:0;overflow:hidden}.ai-assistant-icon.svelte-4tgvxj.svelte-4tgvxj{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px #00000026;transition:all .3s ease;z-index:1000}.ai-assistant-icon.svelte-4tgvxj.svelte-4tgvxj:hover{transform:scale(1.1);box-shadow:0 6px 25px #0003}.ai-assistant-icon.svelte-4tgvxj.svelte-4tgvxj:active{transform:scale(.95)}.ai-assistant-icon.svelte-4tgvxj img.svelte-4tgvxj{width:36px;height:36px;object-fit:contain}.chat-container.svelte-4tgvxj.svelte-4tgvxj{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;animation:svelte-4tgvxj-slideIn .3s ease-out;display:flex;flex-direction:column}.chat-header.svelte-4tgvxj.svelte-4tgvxj{color:#fff;padding:16px 20px;border-radius:12px 12px 0 0;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.chat-header-content.svelte-4tgvxj.svelte-4tgvxj{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-header-icon.svelte-4tgvxj.svelte-4tgvxj{width:24px;height:24px;object-fit:contain;flex-shrink:0}.chat-title.svelte-4tgvxj.svelte-4tgvxj{margin:0;font-size:16px;font-weight:600;text-align:center;font-family:inherit;flex:1}.chat-header-buttons.svelte-4tgvxj.svelte-4tgvxj{display:flex;gap:8px;align-items:center;flex-shrink:0}.chat-new-button.svelte-4tgvxj.svelte-4tgvxj,.chat-download-button.svelte-4tgvxj.svelte-4tgvxj,.chat-close-button.svelte-4tgvxj.svelte-4tgvxj{background:none;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;width:24px;height:24px}.chat-new-button.svelte-4tgvxj.svelte-4tgvxj:hover,.chat-download-button.svelte-4tgvxj.svelte-4tgvxj:hover,.chat-close-button.svelte-4tgvxj.svelte-4tgvxj:hover{background-color:#ffffff1a;transform:scale(1.05)}.chat-new-button.svelte-4tgvxj.svelte-4tgvxj:active,.chat-download-button.svelte-4tgvxj.svelte-4tgvxj:active,.chat-close-button.svelte-4tgvxj.svelte-4tgvxj:active{background-color:#fff3;transform:scale(.95)}.chat-new-button.svelte-4tgvxj.svelte-4tgvxj:focus,.chat-download-button.svelte-4tgvxj.svelte-4tgvxj:focus,.chat-close-button.svelte-4tgvxj.svelte-4tgvxj:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.chat-download-button.svelte-4tgvxj.svelte-4tgvxj:disabled{opacity:.5;cursor:not-allowed}.chat-download-button.svelte-4tgvxj.svelte-4tgvxj:disabled:hover{background-color:transparent;transform:none}.chat-content.svelte-4tgvxj.svelte-4tgvxj{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-content.svelte-4tgvxj deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-content.svelte-4tgvxj deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}@keyframes svelte-4tgvxj-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-4tgvxj.svelte-4tgvxj{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;border-radius:0}.chat-header.svelte-4tgvxj.svelte-4tgvxj{border-radius:0}.ai-assistant-icon.svelte-4tgvxj.svelte-4tgvxj{bottom:30px;right:30px}}
|