@moveo-ai/web-client 0.109.0 → 0.110.0-true.2

package/README.md

@@ -121,9 +121,11 @@ into an analytics tool:
 
 ```javascript
 MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' }).then((controller) => {
-  controller.onAnalyticsEvent(({ timestamp, event, session_id, properties }) => {
-    console.debug('[moveo]', timestamp, event, session_id, properties);
-  });
+  controller.onAnalyticsEvent(
+    ({ timestamp, event, session_id, properties }) => {
+      console.debug('[moveo]', timestamp, event, session_id, properties);
+    }
+  );
 });
 ```
 
@@ -168,14 +170,14 @@ MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' }).then((controller) => {
 
 Initializes the chat widget.
 
-| Parameter       | Type                    | Required | Description                                              |
-| --------------- | ----------------------- | -------- | -------------------------------------------------------- |
-| `integrationId` | `string`                | Yes      | Your Moveo.ai integration ID                             |
-| `host`          | `string`                | No       | Regional channels host, when it differs from the default |
-| `element`       | `HTMLElement \| string` | No       | Embed target, required for the `embed` widget position   |
-| `identityToken` | `string`                | No       | Signed token that verifies the user's identity on the session |
-| `voiceIntegrationId` | `string`           | No       | Voice pairing override for the in-widget call            |
-| `variant`       | `'default' \| 'nbg' \| 'alpha' \| 'fiserv'` | No | Visual variant                       |
+| Parameter            | Type                                        | Required | Description                                                   |
+| -------------------- | ------------------------------------------- | -------- | ------------------------------------------------------------- |
+| `integrationId`      | `string`                                    | Yes      | Your Moveo.ai integration ID                                  |
+| `host`               | `string`                                    | No       | Regional channels host, when it differs from the default      |
+| `element`            | `HTMLElement \| string`                     | No       | Embed target, required for the `embed` widget position        |
+| `identityToken`      | `string`                                    | No       | Signed token that verifies the user's identity on the session |
+| `voiceIntegrationId` | `string`                                    | No       | Voice pairing override for the in-widget call                 |
+| `variant`            | `'default' \| 'nbg' \| 'alpha' \| 'fiserv'` | No       | Visual variant                                                |
 
 Any other key passes through as a widget-config override for the loaded integration.
 
@@ -183,43 +185,50 @@ Any other key passes through as a widget-config override for the loaded integrat
 
 ### WidgetController Methods
 
-| Method                          | Description                                            |
-| ------------------------------- | ------------------------------------------------------ |
-| `openWindow()`                  | Opens the chat window                                  |
-| `closeWindow()`                 | Closes the chat window                                 |
-| `closeConversation({ hide })`   | Ends the conversation; the widget hides unless `hide: false` |
-| `sendMessage({ text })`         | Sends a message to the agent                           |
-| `showTeaserMessage(message?)`   | Shows the teaser bubble                                |
-| `updateContext(ctx)`            | Updates the conversation context                       |
-| `setCSSVariables(vars)`         | Overrides widget CSS variables                         |
-| `setLocale(locale)`             | Switches the widget language                           |
-| `destroy()`                     | Removes the widget from the page                       |
+| Method                        | Description                                                  |
+| ----------------------------- | ------------------------------------------------------------ |
+| `openWindow()`                | Opens the chat window                                        |
+| `closeWindow()`               | Closes the chat window                                       |
+| `closeConversation({ hide })` | Ends the conversation; the widget hides unless `hide: false` |
+| `sendMessage({ text })`       | Sends a message to the agent                                 |
+| `showTeaserMessage(message?)` | Shows the teaser bubble                                      |
+| `updateContext(ctx)`          | Updates the conversation context                             |
+| `setCSSVariables(vars)`       | Overrides widget CSS variables                               |
+| `setLocale(locale)`           | Switches the widget language                                 |
+| `destroy()`                   | Removes the widget from the page                             |
 
 ### WidgetController Events
 
 Register a callback per event. Every callback returns nothing and receives the
 payload listed below.
 
-| Method                        | Fires when                                     | Payload                                              |
-| ----------------------------- | ---------------------------------------------- | ---------------------------------------------------- |
-| `onSessionCreated(cb)`        | A new session opens                            | `{ user_id, session_id, display_name }`              |
-| `onSessionReconnected(cb)`    | An existing session reconnects                 | `{ user_id, session_id, display_name }`              |
-| `onSessionClosed(cb)`         | The session closes                             | —                                                    |
-| `onConversationClosed(cb)`    | The user ends the conversation                 | —                                                    |
-| `onWebchatOpened(cb)`         | The user opens the widget                      | `{ isFull, is_mobile? }`                             |
-| `onWebchatClosed(cb)`         | The user closes the widget                     | `{ isFull }`                                         |
-| `onLinkClicked(cb)`           | The user clicks a link inside the chat         | `{ url }`                                            |
-| `onUnreadMessages(cb)`        | Unread messages exist while the widget is shut | —                                                    |
-| `onNoUnreadMessages(cb)`      | The unread indicator clears                    | —                                                    |
-| `onUserActivity(cb)`          | The visitor interacts with the widget          | —                                                    |
-| `onMemberLeave(cb)`           | An agent leaves the conversation               | —                                                    |
-| `onAnalyticsEvent(cb)`        | Any interaction event (see below)              | `{ timestamp, event, session_id?, properties }`      |
+| Method                     | Fires when                                     | Payload                                         |
+| -------------------------- | ---------------------------------------------- | ----------------------------------------------- |
+| `onSessionCreated(cb)`     | A new session opens                            | `{ user_id, session_id, display_name }`         |
+| `onSessionReconnected(cb)` | An existing session reconnects                 | `{ user_id, session_id, display_name }`         |
+| `onSessionClosed(cb)`      | The session closes                             | —                                               |
+| `onConversationClosed(cb)` | The user ends the conversation                 | —                                               |
+| `onWebchatOpened(cb)`      | The user opens the widget                      | `{ isFull, is_mobile? }`                        |
+| `onWebchatClosed(cb)`      | The user closes the widget                     | `{ isFull }`                                    |
+| `onLinkClicked(cb)`        | The user clicks a link inside the chat         | `{ url }`                                       |
+| `onUnreadMessages(cb)`     | Unread messages exist while the widget is shut | —                                               |
+| `onNoUnreadMessages(cb)`   | The unread indicator clears                    | —                                               |
+| `onUserActivity(cb)`       | The visitor interacts with the widget          | —                                               |
+| `onMemberLeave(cb)`        | An agent leaves the conversation               | —                                               |
+| `onAnalyticsEvent(cb)`     | The widget loads, and every interaction        | `{ timestamp, event, session_id?, properties }` |
 
 `onAnalyticsEvent` receives every interaction the widget tracks, identified by
 the `event` field: `session_start`, `session_end`, `message_sent` (the user sent
 a message — never carries the text), `launcher_clicked`, `rating_submitted`, and
 the rest of the `AnalyticsEvent` enum in `src/hooks/useAnalytics.ts`.
 
+It also receives one event that is not an interaction: **`widget_loaded`**,
+raised as soon as the widget renders on the page. It carries no `session_id`,
+because a session opens only when the visitor opens the chat. Register the
+callback at any time — a callback added after the widget loaded still receives
+`widget_loaded` on registration, so the event cannot be missed in the race
+between `init()` resolving and your `.then()` running.
+
 ### Forward widget events into your analytics
 
 The widget never writes into your analytics tools. If you want chat activity in
@@ -230,9 +239,17 @@ and where. With Quantum Metric, for example:
 MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' }).then((controller) => {
   // Event ids must exist in your Quantum Metric configuration first:
   // sendEvent() silently drops ids that are not defined for the page.
-  const QM_MOVEO_SESSION = 901; // example ids — define your own
+  const QM_MOVEO_LOADED = 900; // example ids — define your own
+  const QM_MOVEO_SESSION = 901;
   const QM_MOVEO_MESSAGE = 902;
 
+  controller.onAnalyticsEvent(({ event }) => {
+    if (event === 'widget_loaded') {
+      // Fires on every page that carries the widget, with no visitor action.
+      window.QuantumMetricAPI?.sendEvent(QM_MOVEO_LOADED, 0, '');
+    }
+  });
+
   controller.onSessionCreated(({ session_id }) => {
     // The Moveo session id becomes searchable on the QM session,
     // joining every replay to its Moveo conversation.
@@ -276,6 +293,79 @@ MoveoAI.init({
 });
 ```
 
+### CSS Variables
+
+Pass any of these to `setCSSVariables()` to restyle the widget. Every value is
+a plain CSS value, applied inside the widget iframe.
+
+```javascript
+const widget = await MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' });
+
+widget.setCSSVariables({
+  '--moveo-border-radius-surface': '8px',
+  '--moveo-font-primary': "'Roboto', sans-serif",
+});
+```
+
+| Variable                        | Default                      | Controls                                                       |
+| ------------------------------- | ---------------------------- | -------------------------------------------------------------- |
+| `--moveo-font-primary`          | unset, see below             | The widget font family                                         |
+| `--moveo-border-radius-surface` | `16px`                       | Corner radius of the chat panel, dialogs and the webview sheet |
+| `--moveo-border-radius-base`    | `5px`                        | Corner radius of inline media and the launcher teaser pill     |
+| `--moveo-header-height`         | `68px`                       | Header height, and the offset every screen below it starts at  |
+| `--moveo-header-background`     | from the theme               | Header background; `theme_colors.header_color` sets it too     |
+| `--moveo-header-text-color`     | from the theme               | Header text and icon colour                                    |
+| `--moveo-shadow-bubble`         | `0px 0px 10px 0px #10182824` | Launcher bubble shadow                                         |
+| `--moveo-loadingIcon-size`      | `1rem`                       | Size of the loading spinner                                    |
+| `--moveo-modal-tall-height`     | `min(600px, 100%)`           | Height of a `tall` webview dialog; never exceeds the widget    |
+| `--moveo-modal-tall-width`      | `min(400px, 100%)`           | Width of a `tall` webview dialog; never exceeds the widget     |
+| `--moveo-expanded-chat-width`   | `672px`                      | Panel width in the expanded layout                             |
+| `--moveo-chat-width`            | from the config              | Panel width; the `chatWindow` config sets it                   |
+| `--moveo-chat-height`           | from the config              | Panel height; the `chatWindow` config sets it                  |
+| `--moveo-z-index`               | `10022`                      | Stacking of the widget against your page. See below            |
+
+#### Fonts
+
+`--moveo-font-primary` is unset by default. The widget then uses the font its
+configuration loads — the `font_family` setting, or the font that ships with
+your variant. Set the variable to override that, at any time and from either
+`setCSSVariables()` or your own stylesheet. The widget never writes it back, so
+your value survives a font that finishes loading later.
+
+#### Stacking order
+
+The widget renders in an iframe on your page, so its stacking is decided by
+your document, not by anything inside the widget. Raise it above a header or a
+cookie banner either from your own stylesheet:
+
+```css
+:root {
+  --moveo-z-index: 999999;
+}
+```
+
+or through the API, which applies it to the iframe on your page:
+
+```javascript
+widget.setCSSVariables({ '--moveo-z-index': '999999' });
+```
+
+Every other variable in the table applies inside the widget iframe.
+
+`--nbg-bg` also exists, for one account's variant styling. It is not part of
+the supported surface.
+
+Colours are better set through the integration's `theme_colors` config, which
+drives the accent, background, border, text, launcher, rating, send-icon, link
+and swimmlane colours for the light and dark themes.
+
+#### Renamed variables
+
+`--moveo-new-header-height` and `--moveo-new-border-radius-base` are the former
+names of `--moveo-header-height` and `--moveo-border-radius-surface`. Setting
+either still works, so existing integrations need no change, but use the names
+in the table above.
+
 ### Supported Languages
 
 The widget supports 26 locales including: English, Spanish, French, German, Italian, Portuguese, Dutch, Greek, Arabic, Hebrew, and more.

package/dist/63.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @moveo-ai/web-client v0.109.0
+ *   @moveo-ai/web-client v0.110.0-true.2
  *   Copyright (c) Moveo.ai (TM)
  *
  */

package/dist/752.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @moveo-ai/web-client v0.109.0
+ *   @moveo-ai/web-client v0.110.0-true.2
  *   Copyright (c) Moveo.ai (TM)
  *
  */

package/dist/882.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @moveo-ai/web-client v0.109.0
+ *   @moveo-ai/web-client v0.110.0-true.2
  *   Copyright (c) Moveo.ai (TM)
  *
  */

package/dist/929.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @moveo-ai/web-client v0.109.0
+ *   @moveo-ai/web-client v0.110.0-true.2
  *   Copyright (c) Moveo.ai (TM)
  *
  */