@moveo-ai/web-client 0.110.0-true.1 → 0.110.0-true.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 +102 -5
- package/dist/63.min.js.LICENSE.txt +1 -1
- package/dist/752.min.js.LICENSE.txt +1 -1
- package/dist/882.min.js.LICENSE.txt +1 -1
- package/dist/929.min.js.LICENSE.txt +1 -1
- package/dist/audio-client.min.js +1 -1
- package/dist/audio-client.min.js.LICENSE.txt +1 -1
- package/dist/iframe.min.js +1 -1
- package/dist/iframe.min.js.LICENSE.txt +1 -1
- package/dist/index.html +1 -1
- package/dist/preview/index.html +2 -2
- package/dist/preview.css.min.js.LICENSE.txt +1 -1
- package/dist/public/locales/ar.json +30 -5
- package/dist/public/locales/bg.json +30 -5
- package/dist/public/locales/cs.json +30 -5
- package/dist/public/locales/da.json +30 -5
- package/dist/public/locales/de.json +30 -5
- package/dist/public/locales/el.json +30 -5
- package/dist/public/locales/en.json +30 -5
- package/dist/public/locales/es.json +30 -5
- package/dist/public/locales/fr.json +30 -5
- package/dist/public/locales/id.json +30 -5
- package/dist/public/locales/it.json +30 -5
- package/dist/public/locales/ja.json +30 -5
- package/dist/public/locales/me.json +30 -5
- package/dist/public/locales/nl-be.json +30 -5
- package/dist/public/locales/nl.json +30 -5
- package/dist/public/locales/pl.json +30 -5
- package/dist/public/locales/pt-br.json +30 -5
- package/dist/public/locales/pt.json +30 -5
- package/dist/public/locales/ro.json +30 -5
- package/dist/public/locales/ru.json +30 -5
- package/dist/public/locales/sq.json +30 -5
- package/dist/public/locales/sr.json +30 -5
- package/dist/public/locales/sv.json +30 -5
- package/dist/public/locales/tl.json +30 -5
- package/dist/public/locales/tr.json +30 -5
- package/dist/public/locales/zh.json +30 -5
- package/dist/telnyx-client.min.js +1 -1
- package/dist/telnyx-client.min.js.LICENSE.txt +1 -1
- package/dist/web-client.min.js +1 -1
- package/dist/web-client.min.js.LICENSE.txt +1 -1
- package/dist/webrtc-client.min.js +1 -1
- package/dist/webrtc-client.min.js.LICENSE.txt +1 -1
- package/package.json +10 -3
- package/web-client.d.ts +1 -1
package/README.md
CHANGED
|
@@ -215,13 +215,40 @@ payload listed below.
|
|
|
215
215
|
| `onNoUnreadMessages(cb)` | The unread indicator clears | — |
|
|
216
216
|
| `onUserActivity(cb)` | The visitor interacts with the widget | — |
|
|
217
217
|
| `onMemberLeave(cb)` | An agent leaves the conversation | — |
|
|
218
|
-
| `onAnalyticsEvent(cb)` |
|
|
218
|
+
| `onAnalyticsEvent(cb)` | The widget loads, and every interaction | `{ timestamp, event, session_id?, properties }` |
|
|
219
219
|
|
|
220
220
|
`onAnalyticsEvent` receives every interaction the widget tracks, identified by
|
|
221
221
|
the `event` field: `session_start`, `session_end`, `message_sent` (the user sent
|
|
222
222
|
a message — never carries the text), `launcher_clicked`, `rating_submitted`, and
|
|
223
223
|
the rest of the `AnalyticsEvent` enum in `src/hooks/useAnalytics.ts`.
|
|
224
224
|
|
|
225
|
+
It also receives one event that is not an interaction: **`widget_loaded`**,
|
|
226
|
+
raised as soon as the widget renders on the page. It carries no `session_id`,
|
|
227
|
+
because a session opens only when the visitor opens the chat. Register the
|
|
228
|
+
callback at any time — a callback added after the widget loaded still receives
|
|
229
|
+
`widget_loaded` on registration, so the event cannot be missed in the race
|
|
230
|
+
between `init()` resolving and your `.then()` running.
|
|
231
|
+
|
|
232
|
+
#### Header control changes
|
|
233
|
+
|
|
234
|
+
The header no longer carries a separate minimize button. The close button hides
|
|
235
|
+
the panel and leaves the conversation open, and **Restart** moved into the
|
|
236
|
+
header menu, where it asks before it ends the conversation. Three consequences
|
|
237
|
+
for anything you already bind:
|
|
238
|
+
|
|
239
|
+
- **`minimize_icon_clicked` no longer exists.** It left the `AnalyticsEventName`
|
|
240
|
+
union with the button. A filter on that name now matches nothing, silently.
|
|
241
|
+
There is no replacement: the close button reports `close_icon_clicked`.
|
|
242
|
+
- **`close_icon_clicked` no longer implies the conversation ended.** It now
|
|
243
|
+
means the visitor hid the panel. Counting it as an end overstates your
|
|
244
|
+
conversation count.
|
|
245
|
+
- **`restart_conversation_clicked` is new.** It fires when the visitor opens
|
|
246
|
+
Restart from the header menu, before the confirmation. `onConversationClosed`
|
|
247
|
+
still fires only if they confirm, so the two are not interchangeable.
|
|
248
|
+
|
|
249
|
+
During a voice call the close button keeps its old meaning and ends the call,
|
|
250
|
+
after a confirmation.
|
|
251
|
+
|
|
225
252
|
### Forward widget events into your analytics
|
|
226
253
|
|
|
227
254
|
The widget never writes into your analytics tools. If you want chat activity in
|
|
@@ -232,9 +259,17 @@ and where. With Quantum Metric, for example:
|
|
|
232
259
|
MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' }).then((controller) => {
|
|
233
260
|
// Event ids must exist in your Quantum Metric configuration first:
|
|
234
261
|
// sendEvent() silently drops ids that are not defined for the page.
|
|
235
|
-
const
|
|
262
|
+
const QM_MOVEO_LOADED = 900; // example ids — define your own
|
|
263
|
+
const QM_MOVEO_SESSION = 901;
|
|
236
264
|
const QM_MOVEO_MESSAGE = 902;
|
|
237
265
|
|
|
266
|
+
controller.onAnalyticsEvent(({ event }) => {
|
|
267
|
+
if (event === 'widget_loaded') {
|
|
268
|
+
// Fires on every page that carries the widget, with no visitor action.
|
|
269
|
+
window.QuantumMetricAPI?.sendEvent(QM_MOVEO_LOADED, 0, '');
|
|
270
|
+
}
|
|
271
|
+
});
|
|
272
|
+
|
|
238
273
|
controller.onSessionCreated(({ session_id }) => {
|
|
239
274
|
// The Moveo session id becomes searchable on the QM session,
|
|
240
275
|
// joining every replay to its Moveo conversation.
|
|
@@ -278,6 +313,35 @@ MoveoAI.init({
|
|
|
278
313
|
});
|
|
279
314
|
```
|
|
280
315
|
|
|
316
|
+
### Inactivity Timeout
|
|
317
|
+
|
|
318
|
+
The widget opens an inactivity modal once the visitor goes quiet, and asks
|
|
319
|
+
whether to keep the conversation. Set `inactivity_timeout` in minutes to change
|
|
320
|
+
when it appears. Set it in the integration's configuration, or override it on
|
|
321
|
+
`init()`:
|
|
322
|
+
|
|
323
|
+
```javascript
|
|
324
|
+
MoveoAI.init({
|
|
325
|
+
integrationId: 'YOUR_INTEGRATION_ID',
|
|
326
|
+
inactivity_timeout: 20, // minutes; 0 turns the modal off
|
|
327
|
+
});
|
|
328
|
+
```
|
|
329
|
+
|
|
330
|
+
| Value | Effect |
|
|
331
|
+
| --------------------------------- | ------------------------------------------ |
|
|
332
|
+
| `0` | No modal. The widget still tracks activity |
|
|
333
|
+
| `3` to `30` | The modal opens after that many minutes |
|
|
334
|
+
| Below `3`, or above `30` | Clamped into the 3 to 30 minute range |
|
|
335
|
+
| Absent, negative, or not a number | The default, 10 minutes |
|
|
336
|
+
|
|
337
|
+
Below 3 minutes the modal interrupts a visitor who only stopped to read. Above
|
|
338
|
+
30 it holds a dead session open for hours. A negative value falls back to the
|
|
339
|
+
default rather than to `0`, so a malformed configuration cannot switch the
|
|
340
|
+
modal off without anyone noticing.
|
|
341
|
+
|
|
342
|
+
Only activity inside the widget counts. A visitor who scrolls your page but
|
|
343
|
+
does not touch the chat is inactive.
|
|
344
|
+
|
|
281
345
|
### CSS Variables
|
|
282
346
|
|
|
283
347
|
Pass any of these to `setCSSVariables()` to restyle the widget. Every value is
|
|
@@ -340,9 +404,42 @@ Every other variable in the table applies inside the widget iframe.
|
|
|
340
404
|
`--nbg-bg` also exists, for one account's variant styling. It is not part of
|
|
341
405
|
the supported surface.
|
|
342
406
|
|
|
343
|
-
Colours
|
|
344
|
-
|
|
345
|
-
|
|
407
|
+
#### Colours
|
|
408
|
+
|
|
409
|
+
Set colours in the integration's `theme_colors` config, which carries a `light`
|
|
410
|
+
and a `dark` set. Each key writes one CSS variable, so the same colours can be
|
|
411
|
+
overridden at runtime through `setCSSVariables()`, which wins over the config.
|
|
412
|
+
|
|
413
|
+
| `theme_colors` key | CSS variable | Controls |
|
|
414
|
+
| ---------------------- | ----------------------------------- | ----------------------------------------------------------- |
|
|
415
|
+
| `accent_color` | `--color-accent` | The accent, and the default for every colour marked below |
|
|
416
|
+
| `background_color` | `--color-background` | The widget surface, and the area behind the messages |
|
|
417
|
+
| `border_color` | `--color-border` | Panel, composer and card borders |
|
|
418
|
+
| `header_color` | `--moveo-header-background` | Header background |
|
|
419
|
+
| `text_color_header` | `--moveo-header-text-color` | Header text and icons |
|
|
420
|
+
| `text_color_user` | `--color-text-primary-foreground` | Text inside the visitor's own bubbles |
|
|
421
|
+
| `text_color_agent` | `--color-text-secondary-foreground` | Text inside the agent's bubbles |
|
|
422
|
+
| `launcher_background` | `--color-launcher-background` | Launcher bubble; defaults to the accent |
|
|
423
|
+
| `launcher_foreground` | `--color-launcher-foreground` | Launcher icon; defaults to the widget background |
|
|
424
|
+
| `link_color` | `--color-link` | Links in messages; defaults to the accent |
|
|
425
|
+
| `rating_background` | `--color-rating-background` | Selected rating button; defaults to the accent |
|
|
426
|
+
| `send_icon_color` | `--color-send-icon` | Send icon in the composer; defaults to the accent |
|
|
427
|
+
| `swimmlane_background` | `--color-swimmlane-background` | System message pill background |
|
|
428
|
+
| `swimmlane_foreground` | `--color-swimmlane-foreground` | System message pill text; defaults to the agent text colour |
|
|
429
|
+
|
|
430
|
+
A colour that says "defaults to" follows `--color-accent` — or the colour named
|
|
431
|
+
— until you set it. So an accent alone restyles the links, the rating, the send
|
|
432
|
+
icon and the launcher, and `--color-chat-background` follows the background.
|
|
433
|
+
|
|
434
|
+
Four more colours have no `theme_colors` key, so they are set through
|
|
435
|
+
`setCSSVariables()` only:
|
|
436
|
+
|
|
437
|
+
| Variable | Controls |
|
|
438
|
+
| ---------------------------- | ---------------------------------------------------- |
|
|
439
|
+
| `--color-chat-background` | The area behind the messages; follows the background |
|
|
440
|
+
| `--color-options-background` | Quick reply button background |
|
|
441
|
+
| `--color-options-foreground` | Quick reply button label; defaults to the accent |
|
|
442
|
+
| `--color-options-border` | Quick reply button border; defaults to the accent |
|
|
346
443
|
|
|
347
444
|
#### Renamed variables
|
|
348
445
|
|