ninchat-embed 2.6.2 → 2.7.0

package/README.md

@@ -91,17 +91,23 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `initialRoute` | `Route` | Initial route on application load (for app version only) (app variant) |
 | `colorScheme` | `'light' \| 'dark'` | Color scheme preference (app variant) |
 | `hideSidebar` | `boolean` | Hide application sidebar |
+| `hideMenubar` | `boolean` | Hide application menubar/navbar |
+
 
 ### Config 'Queue' and 'Channel' variants properties
 
 | Key | Type | Description |
 |-----|------|-------------|
+| `reverseEmbedHeroContentOrdering` | `boolean`| Reverse order of elements in hero, rotating spinner will be the last |
 | `scheduleAccessKey` | `string` | Access key for scheduled appointments |
 | `channelId` | `string` | Channel id for variant "channel" |
 | `audienceRealmId` | `string` | Realm identifier for audience (required) |
 | `audienceAutoQueue` | `string` | Automatic queue for audience |
 | `language` | `'fi' \| 'en' \| 'sv'` | Default language |
 | `translations` | `object {"string": "string"}` | Custom translation overrides (key-value pairs) |
+| `chatThumbnailsSize` | `object` | Configuration for chat thumbnails |
+| `chatThumbnailsSize.maxHeight` | `number` | Chat thumbnail maxHeight (150px defailt) |
+| `chatThumbnailsSize.maxWidth` | `string` | Chat thumbnail maxWidth (150px default) |
 | `askUserName` | `boolean` | Force ask userName modal before entering first chat message |
 | `inQueueText` | `string` | Text shown when user is in queue |
 | `showCloseConfirmation` | `boolean` | Show confirmation dialog on close |
@@ -151,15 +157,30 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `containerOptions.headerOptions.image.height` | `number` | Image height |
 | `containerOptions.headerOptions.actions` | `object` | Header action buttons |
 | `containerOptions.headerOptions.actions.close` | `object` | Close button configuration |
-| `containerOptions.headerOptions.actions.close.icon` | `boolean` | Show close icon |
+| `containerOptions.headerOptions.actions.close.icon` | `object/boolean` | Close icon configuration - show/hide default icon |
+| `containerOptions.headerOptions.actions.close.icon.src` | `string` | Image source URL |
+| `containerOptions.headerOptions.actions.close.icon.alt` | `string` | Image alt text |
+| `containerOptions.headerOptions.actions.close.icon.svg` | `string` | Inline SVG |
+| `containerOptions.headerOptions.actions.close.icon.width` | `number` | Image width |
+| `containerOptions.headerOptions.actions.close.icon.height` | `number` | Image height |
 | `containerOptions.headerOptions.actions.close.buttonTitle` | `string` | Close button title |
 | `containerOptions.headerOptions.actions.close.text` | `string` | Close button text |
 | `containerOptions.headerOptions.actions.dropdown` | `object` | Dropdown button configuration |
-| `containerOptions.headerOptions.actions.dropdown.icon` | `boolean` | Show dropdown icon |
+| `containerOptions.headerOptions.actions.dropdown.icon` | `object/boolean` | Dropdown icon configuration - show/hide default icon |
+| `containerOptions.headerOptions.actions.dropdown.icon.src` | `string` | Image source URL |
+| `containerOptions.headerOptions.actions.dropdown.icon.alt` | `string` | Image alt text |
+| `containerOptions.headerOptions.actions.dropdown.icon.svg` | `string` | Inline SVG |
+| `containerOptions.headerOptions.actions.dropdown.icon.width` | `number` | Image width |
+| `containerOptions.headerOptions.actions.dropdown.icon.height` | `number` | Image height |
 | `containerOptions.headerOptions.actions.dropdown.buttonTitle` | `string` | Dropdown button title |
 | `containerOptions.headerOptions.actions.dropdown.text` | `string` | Dropdown button text |
 | `containerOptions.headerOptions.actions.chatList` | `object` | Chat list button configuration |
-| `containerOptions.headerOptions.actions.chatList.icon` | `boolean` | Show chat list icon |
+| `containerOptions.headerOptions.actions.chatList.icon` | `object/boolean` | ChatList icon configuration - show/hide default icon |
+| `containerOptions.headerOptions.actions.chatList.icon.src` | `string` | Image source URL |
+| `containerOptions.headerOptions.actions.chatList.icon.alt` | `string` | Image alt text |
+| `containerOptions.headerOptions.actions.chatList.icon.svg` | `string` | Inline SVG |
+| `containerOptions.headerOptions.actions.chatList.icon.width` | `number` | Image width |
+| `containerOptions.headerOptions.actions.chatList.icon.height` | `number` | Image height |
 | `containerOptions.headerOptions.actions.chatList.buttonTitle` | `string` | Chat list button title |
 | `containerOptions.headerOptions.actions.chatList.text` | `string` | Chat list button text |
 
@@ -184,9 +205,6 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `floatingOptions.ballOptions.offset` | `object` | Ball position offset |
 | `floatingOptions.ballOptions.offset.x` | `number` | Horizontal offset in pixels |
 | `floatingOptions.ballOptions.offset.y` | `number` | Vertical offset in pixels |
-| `floatingOptions.ballOptions.padding` | `object` | Ball padding |
-| `floatingOptions.ballOptions.padding.horizontal` | `number` | Horizontal padding in pixels |
-| `floatingOptions.ballOptions.padding.vertical` | `number` | Vertical padding in pixels |
 | `floatingOptions.headerOptions` | `object` | Floating header configuration |
 | `floatingOptions.headerOptions.height` | `number` | Header height in pixels |
 | `floatingOptions.headerOptions.title` | `object` | Title text per state |
@@ -202,65 +220,140 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `floatingOptions.headerOptions.actions` | `object` | Action buttons configuration |
 | `floatingOptions.headerOptions.actions.minimized` | `object` | Actions for minimized state |
 | `floatingOptions.headerOptions.actions.minimized.minimize` | `object` | Minimize button config |
-| `floatingOptions.headerOptions.actions.minimized.minimize.icon` | `boolean` | Show minimize icon |
+| `floatingOptions.headerOptions.actions.minimized.minimize.icon` | `object/boolean` | Minimize icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.minimized.minimize.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.minimized.minimize.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.minimized.minimize.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.minimized.minimize.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.minimized.minimize.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.minimized.minimize.buttonTitle` | `string` | Minimize button title |
 | `floatingOptions.headerOptions.actions.minimized.minimize.text` | `string` | Minimize button text |
 | `floatingOptions.headerOptions.actions.minimized.expand` | `object` | Expand button config |
-| `floatingOptions.headerOptions.actions.minimized.expand.icon` | `boolean` | Show expand icon |
+| `floatingOptions.headerOptions.actions.minimized.expand.icon` |`object/boolean` | Expand icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.minimized.expand.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.minimized.expand.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.minimized.expand.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.minimized.expand.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.minimized.expand.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.minimized.expand.buttonTitle` | `string` | Expand button title |
 | `floatingOptions.headerOptions.actions.minimized.expand.text` | `string` | Expand button text |
 | `floatingOptions.headerOptions.actions.minimized.close` | `object` | Close button config |
-| `floatingOptions.headerOptions.actions.minimized.close.icon` | `boolean` | Show close icon |
+| `floatingOptions.headerOptions.actions.minimized.close.icon` |`object/boolean` | Close icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.minimized.close.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.minimized.close.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.minimized.close.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.minimized.close.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.minimized.close.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.minimized.close.buttonTitle` | `string` | Close button title |
 | `floatingOptions.headerOptions.actions.minimized.close.text` | `string` | Close button text |
 | `floatingOptions.headerOptions.actions.minimized.dropdown` | `object` | Dropdown button config |
-| `floatingOptions.headerOptions.actions.minimized.dropdown.icon` | `boolean` | Show dropdown icon |
+| `floatingOptions.headerOptions.actions.minimized.dropdown.icon` |`object/boolean` | Dropdown icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.minimized.dropdown.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.minimized.dropdown.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.minimized.dropdowd.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.minimized.dropdown.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.minimized.dropdown.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.minimized.dropdown.buttonTitle` | `string` | Dropdown button title |
 | `floatingOptions.headerOptions.actions.minimized.dropdown.text` | `string` | Dropdown button text |
 | `floatingOptions.headerOptions.actions.minimized.chatList` | `object` | Chat list button config |
-| `floatingOptions.headerOptions.actions.minimized.chatList.icon` | `boolean` | Show chat list icon |
+| `floatingOptions.headerOptions.actions.minimized.chatList.icon` |`object/boolean` | Chat list icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.minimized.chatList.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.minimized.chatList.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.minimized.chatList.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.minimized.chatList.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.minimized.chatList.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.minimized.chatList.buttonTitle` | `string` | Chat list button title |
 | `floatingOptions.headerOptions.actions.minimized.chatList.text` | `string` | Chat list button text |
 | `floatingOptions.headerOptions.actions.open` | `object` | Actions for open state |
 | `floatingOptions.headerOptions.actions.open.minimize` | `object` | Minimize button config |
-| `floatingOptions.headerOptions.actions.open.minimize.icon` | `boolean` | Show minimize icon |
+| `floatingOptions.headerOptions.actions.open.minimize.icon` | `object/boolean` | Minimize icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.open.minimize.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.open.minimize.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.open.minimize.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.open.minimize.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.open.minimize.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.open.minimize.buttonTitle` | `string` | Minimize button title |
 | `floatingOptions.headerOptions.actions.open.minimize.text` | `string` | Minimize button text |
 | `floatingOptions.headerOptions.actions.open.expand` | `object` | Expand button config |
-| `floatingOptions.headerOptions.actions.open.expand.icon` | `boolean` | Show expand icon |
+| `floatingOptions.headerOptions.actions.open.expand.icon` |`object/boolean` | Expand icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.open.expand.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.open.expand.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.open.expand.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.open.expand.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.open.expand.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.open.expand.buttonTitle` | `string` | Expand button title |
 | `floatingOptions.headerOptions.actions.open.expand.text` | `string` | Expand button text |
 | `floatingOptions.headerOptions.actions.open.close` | `object` | Close button config |
-| `floatingOptions.headerOptions.actions.open.close.icon` | `boolean` | Show close icon |
+| `floatingOptions.headerOptions.actions.open.close.icon` |`object/boolean` | Close icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.open.close.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.open.close.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.open.close.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.open.close.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.open.close.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.open.close.buttonTitle` | `string` | Close button title |
 | `floatingOptions.headerOptions.actions.open.close.text` | `string` | Close button text |
 | `floatingOptions.headerOptions.actions.open.dropdown` | `object` | Dropdown button config |
-| `floatingOptions.headerOptions.actions.open.dropdown.icon` | `boolean` | Show dropdown icon |
+| `floatingOptions.headerOptions.actions.open.dropdown.icon` |`object/boolean` | Dropdown icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.open.dropdown.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.open.dropdown.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.open.dropdowd.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.open.dropdown.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.open.dropdown.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.open.dropdown.buttonTitle` | `string` | Dropdown button title |
 | `floatingOptions.headerOptions.actions.open.dropdown.text` | `string` | Dropdown button text |
 | `floatingOptions.headerOptions.actions.open.chatList` | `object` | Chat list button config |
-| `floatingOptions.headerOptions.actions.open.chatList.icon` | `boolean` | Show chat list icon |
+| `floatingOptions.headerOptions.actions.open.chatList.icon` |`object/boolean` | Chat list icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.open.chatList.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.open.chatList.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.open.chatList.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.open.chatList.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.open.chatList.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.open.chatList.buttonTitle` | `string` | Chat list button title |
 | `floatingOptions.headerOptions.actions.open.chatList.text` | `string` | Chat list button text |
 | `floatingOptions.headerOptions.actions.full` | `object` | Actions for expanded/full state |
 | `floatingOptions.headerOptions.actions.full.minimize` | `object` | Minimize button config |
-| `floatingOptions.headerOptions.actions.full.minimize.icon` | `boolean` | Show minimize icon |
+| `floatingOptions.headerOptions.actions.full.minimize.icon` | `object/boolean` | Minimize icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.full.minimize.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.full.minimize.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.full.minimize.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.full.minimize.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.full.minimize.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.full.minimize.buttonTitle` | `string` | Minimize button title |
 | `floatingOptions.headerOptions.actions.full.minimize.text` | `string` | Minimize button text |
 | `floatingOptions.headerOptions.actions.full.expand` | `object` | Expand button config |
-| `floatingOptions.headerOptions.actions.full.expand.icon` | `boolean` | Show expand icon |
+| `floatingOptions.headerOptions.actions.full.expand.icon` |`object/boolean` | Expand icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.full.expand.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.full.expand.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.full.expand.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.full.expand.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.full.expand.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.full.expand.buttonTitle` | `string` | Expand button title |
 | `floatingOptions.headerOptions.actions.full.expand.text` | `string` | Expand button text |
 | `floatingOptions.headerOptions.actions.full.close` | `object` | Close button config |
-| `floatingOptions.headerOptions.actions.full.close.icon` | `boolean` | Show close icon |
+| `floatingOptions.headerOptions.actions.full.close.icon` |`object/boolean` | Close icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.full.close.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.full.close.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.full.close.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.full.close.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.full.close.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.full.close.buttonTitle` | `string` | Close button title |
 | `floatingOptions.headerOptions.actions.full.close.text` | `string` | Close button text |
 | `floatingOptions.headerOptions.actions.full.dropdown` | `object` | Dropdown button config |
-| `floatingOptions.headerOptions.actions.full.dropdown.icon` | `boolean` | Show dropdown icon |
+| `floatingOptions.headerOptions.actions.full.dropdown.icon` |`object/boolean` | Dropdown icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.full.dropdown.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.full.dropdown.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.full.dropdowd.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.full.dropdown.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.full.dropdown.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.full.dropdown.buttonTitle` | `string` | Dropdown button title |
 | `floatingOptions.headerOptions.actions.full.dropdown.text` | `string` | Dropdown button text |
 | `floatingOptions.headerOptions.actions.full.chatList` | `object` | Chat list button config |
-| `floatingOptions.headerOptions.actions.full.chatList.icon` | `boolean` | Show chat list icon |
+| `floatingOptions.headerOptions.actions.full.chatList.icon` |`object/boolean` | Chat list icon configuration - show/hide default |
+| `floatingOptions.headerOptions.actions.full.chatList.icon.src` | `string` | Image source URL |
+| `floatingOptions.headerOptions.actions.full.chatList.icon.alt` | `string` | Image alt text |
+| `floatingOptions.headerOptions.actions.full.chatList.icon.svg` | `string` | Inline SVG |
+| `floatingOptions.headerOptions.actions.full.chatList.icon.width` | `number` | Image width |
+| `floatingOptions.headerOptions.actions.full.chatList.icon.height` | `number` | Image height |
 | `floatingOptions.headerOptions.actions.full.chatList.buttonTitle` | `string` | Chat list button title |
 | `floatingOptions.headerOptions.actions.full.chatList.text` | `string` | Chat list button text |
 | `floatingOptions.promoBubble` | `object` | Promotional bubble configuration |
@@ -296,6 +389,9 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `customFonts[].weight` | `string \| number` | Font weight |
 | `customFonts[].style` | `'normal' \| 'italic' \| 'bold'` | Font style |
 | `customFonts[].src` | `string` | Font file URL (required) |
+| `customFonts[].ascentOverride` | `string` | `@font-face` ascent-override descriptor (e.g. `'90%'`). Normalizes the font's intrinsic ascent metric to keep line-box height consistent across browsers (notably Firefox) |
+| `customFonts[].descentOverride` | `string` | `@font-face` descent-override descriptor (e.g. `'22%'`). Normalizes the font's intrinsic descent metric to keep line-box height consistent across browsers |
+| `customFonts[].lineGapOverride` | `string` | `@font-face` line-gap-override descriptor (e.g. `'0%'`). Normalizes the font's intrinsic line gap to keep line-box height consistent across browsers |
 | `colors.buttonFilledBackground` | `string` | Button filled background color |
 | `colors.buttonFilledBackgroundActive` | `string` | Button filled background color (active) |
 | `colors.buttonFilledBackgroundDisabled` | `string` | Button filled background color (disabled) |
@@ -329,7 +425,7 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `colors.buttonBorderHover` | `string` | Button border color (hover) |
 | `colors.buttonText` | `string` | Button text color |
 | `colors.buttonTextActive` | `string` | Button text color (active) |
-| `colors.buttonTextdDisabled` | `string` | Button text color (disabled) |
+| `colors.buttonTextDisabled` | `string` | Button text color (disabled) |
 | `colors.buttonTextFocus` | `string` | Button text color (focus) |
 | `colors.buttonTextHover` | `string` | Button text color (hover) |
 | `colors.buttonIcon` | `string` | Button icon color |
@@ -380,6 +476,11 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `colors.buttonSendIconFocus` | `string` | Send button icon color (focus) |
 | `colors.buttonSendIconHover` | `string` | Send button icon color (hover) |
 | `colors.buttonSendOutlineFocus` | `string` | Send button focus outline color |
+| `colors.buttonCommandBarBorder` | `string` | Command bar button border color |
+| `colors.buttonCommandBarBorderActive` | `string` | Command bar button border color (active) |
+| `colors.buttonCommandBarBorderDisabled` | `string` |  Command bar button border color (disabled) |
+| `colors.buttonCommandBarBorderFocus` | `string` |  Command bar button border color (focus) |
+| `colors.buttonCommandBarBorderHover` | `string` |  Command bar button border color (hover) |
 | `colors.buttonVideoBackground` | `string` | Video button background color |
 | `colors.buttonVideoBackgroundActive` | `string` | Video button background color (active) |
 | `colors.buttonVideoBackgroundDisabled` | `string` | Video button background color (disabled) |
@@ -403,10 +504,13 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `colors.buttonVideoOutlineFocus` | `string` | Video button focus outline color |
 | `colors.questionnaireRadioBackground` | `string` | Radio button background color |
 | `colors.questionnaireRadioBackgroundSelected` | `string` | Radio button background color (selected) |
+| `colors.questionnaireRadioBackgroundHover` | `string` | Radio button background hover | 
 | `colors.questionnaireRadioBorder` | `string` | Radio button border color |
 | `colors.questionnaireRadioBorderSelected` | `string` | Radio button border color (selected) |
+| `colors.questionnaireRadioBorderHover` | `string`| Radio button border hover color |
 | `colors.questionnaireRadioText` | `string` | Radio button text color |
 | `colors.questionnaireRadioTextSelected` | `string` | Radio button text color (selected) |
+| `colors.questionnaireRadioTextHover` | `string`| Radio button text hover color |
 | `colors.questionnaireRadioFocusOutline` | `string` | Radio button focus outline color |
 | `colors.modalBackground` | `string` | Modal background color |
 | `colors.modalHeaderBackground` | `string` | Modal header background color |
@@ -521,6 +625,8 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `colors.floatingEmbedHeaderSubtitle` | `string` | Floating embed header subtitle color |
 | `colors.floatingEmbedHeaderButton` | `string` | Floating embed header button color |
 | `colors.floatingEmbedHeaderButtonIcon` | `string` | Floating embed header button icon color |
+| `colors.floatingEmbedHeaderButtonHover` | `string` | Floating embed header button hover color |
+| `colors.floatingEmbedHeaderButtonIconHiver` | `string` | Floating embed header button icon hover color |
 | `colors.floatingEmbedHeaderButtonBackground` | `string` | Floating embed header button background color |
 | `colors.floatingEmbedHeaderButtonBorder` | `string` | Floating embed header button border color |
 | `colors.floatingEmbedHeaderButtonHoverBackground` | `string` | Floating embed header button background (hover) |
@@ -540,6 +646,8 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `colors.containerEmbedHeaderSubtitle` | `string` | Container embed header subtitle color |
 | `colors.containerEmbedHeaderButton` | `string` | Container embed header button color |
 | `colors.containerEmbedHeaderButtonIcon` | `string` | Container embed header button icon color |
+| `colors.containerEmbedHeaderButtonHover` | `string` | Container embed header button hover color |
+| `colors.containerEmbedHeaderButtonIconHover` | `string` | Container embed header button icon hover color |
 | `colors.containerEmbedHeaderButtonBackground` | `string` | Container embed header button background color |
 | `colors.containerEmbedHeaderButtonBorder` | `string` | Container embed header button border color |
 | `colors.containerEmbedHeaderButtonHoverBackground` | `string` | Container embed header button background (hover) |
@@ -555,19 +663,27 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `colors.embedBodyBold` | `string` | Embed body bold text color |
 | `colors.embedBodyBackground` | `string` | Embed body background color |
 | `colors.embedErrorTitle` | `string` | Embed error title color |
+| `colors.embedHeadingHighlighted` | `string` | Embed body heading highlighted color |
 | `colors.embedHero` | `string` | Embed hero text color |
 | `colors.embedHeroBorder` | `string` | Embed hero border color |
 | `colors.embedHeroBackground` | `string` | Embed hero background color |
 | `colors.embedHeroAvatar` | `string` | Embed hero avatar background color |
 | `colors.embedHeroAvatarBorder` | `string` | Embed hero avatar border color |
+| `colors.embedHeroTitle` | `string` | Embed hero title color |
+| `colors.embedHeroTitleInQueue` | `string` | Embed hero title in queue color |
 | `colors.embedHeroSubtitle` | `string` | Embed hero subtitle color |
+| `colors.embedHeroSubtitleInQueue` | `string` | Embed hero subtitle in queue color |
+| `colors.embedHeroErrorTitle` | `string` | Embed hero error title color |
+| `colors.embedHeroErrorMessage` | `string` | Embed hero error message color |
 | `colors.embedQueuePosition` | `string` | Embed queue position text color |
 | `colors.embedQueueSpinner` | `string` | Embed queue spinner color |
+| `colors.embedModalHeader` | `string` | Embed modal header color |
+| `colors.questionnaireErrorTitle` | `string` | Embed error title color |
 | `colors.questionnaireNavigation` | `string` | Questionnaire navigation color |
 | `colors.questionnaireEmojiGood` | `string` | Questionnaire good emoji color |
-| `colors.questionnaireEmojiAvarageGood` | `string` | Questionnaire above average emoji color |
-| `colors.questionnaireEmojiAvarage` | `string` | Questionnaire average emoji color |
-| `colors.questionnaireEmojiAvarageBad` | `string` | Questionnaire below average emoji color |
+| `colors.questionnaireEmojiAverageGood` | `string` | Questionnaire above average emoji color |
+| `colors.questionnaireEmojiAverage` | `string` | Questionnaire average emoji color |
+| `colors.questionnaireEmojiAverageBad` | `string` | Questionnaire below average emoji color |
 | `colors.questionnaireEmojiBad` | `string` | Questionnaire bad emoji color |
 | `colors.questionnaireLink` | `string` | Questionnaire link color |
 | `colors.questionnaireLinkHover` | `string` | Questionnaire link color (hover) |
@@ -619,6 +735,7 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `borderStyles.button` | `string` | Button border style |
 | `borderStyles.buttonText` | `string` | Text button border style |
 | `borderStyles.buttonSend` | `string` | Send button border style |
+| `borderStyles.buttonCommandBar` | `string` | Command bar buttons border style |
 | `borderStyles.buttonVideo` | `string` | Video button border style |
 | `borderStyles.modal` | `string` | Modal border style |
 | `borderStyles.input` | `string` | Input border style |
@@ -639,6 +756,7 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `borderWidths.button` | `string` | Button border width |
 | `borderWidths.buttonText` | `string` | Text button border width |
 | `borderWidths.buttonSend` | `string` | Send button border width |
+| `borderWidths.buttonCommandBar` | `string` | Command bar buttons border width |
 | `borderWidths.buttonVideo` | `string` | Video button border width |
 | `borderWidths.modal` | `string` | Modal border width |
 | `borderWidths.input` | `string` | Input border width |
@@ -668,7 +786,14 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `fonts.embedBodyHeading5` | `string` | Embed body heading 5 font family |
 | `fonts.embedBodyHeading6` | `string` | Embed body heading 6 font family |
 | `fonts.embedHero` | `string` | Embed hero font family |
+| `fonts.embedHeroTitle` | `string` | Embed hero title font family |
+| `fonts.embedHeroAvatar` | `string` | Embed hero avatar font family |
+| `fonts.embedHeroTitleInQueue` | `string` | Embed hero title in queue font family |
 | `fonts.embedHeroSubtitle` | `string` | Embed hero subtitle font family |
+| `fonts.embedHeroSubtitleInQueue` | `string` | Embed hero subtitle in queue font family |
+| `fonts.embedHeroErrorTitle` | `string` | Embed hero error title font family |
+| `fonts.embedHeroErrorMessage` | `string` | Embed hero error message font family |
+| `fonts.embedModalHeader` | `string` | Embed Modal heater font family |
 | `fonts.questionnaireLink` | `string` | Questionnaire link font family |
 | `fonts.buttonFilled` | `string` | Filled button font family |
 | `fonts.button` | `string` | Button font family |
@@ -693,6 +818,7 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `fontSizes.containerEmbedHeaderTitle` | `string` | Container embed header title font size |
 | `fontSizes.containerEmbedHeaderSubtitle` | `string` | Container embed header subtitle font size |
 | `fontSizes.containerEmbedHeaderButton` | `string` | Container embed header button font size |
+| `fontSizes.containerEmbedHeaderAvatar` | `string` | Container embed header avatar font size |
 | `fontSizes.embedBody` | `string` | Embed body font size |
 | `fontSizes.embedBodyHeading1` | `string` | Embed body heading 1 font size |
 | `fontSizes.embedBodyHeading2` | `string` | Embed body heading 2 font size |
@@ -701,7 +827,15 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `fontSizes.embedBodyHeading5` | `string` | Embed body heading 5 font size |
 | `fontSizes.embedBodyHeading6` | `string` | Embed body heading 6 font size |
 | `fontSizes.embedHero` | `string` | Embed hero font size |
+| `fontSizes.embedHeroTitle` | `string` | Embed hero title font size |
+| `fontSizes.embedHeroAvatar` | `string` | Embed hero avatar font size |
+| `fontSizes.embedHeroTitleInQueue` | `string` | Embed hero title in queue font size |
 | `fontSizes.embedHeroSubtitle` | `string` | Embed hero subtitle font size |
+| `fontSizes.embedHeroSubtitleInQueue` | `string` | Embed hero subtitle in queue font size |
+| `fontSizes.embedHeroErrorTitle` | `string` | Embed hero error title font size |
+| `fontSizes.embedHeroErrorMessage` | `string` | Embed hero error message font size |
+| `fontSizes.embedQueuePosition` | `string` | Embed queue spinner position text size |
+| `fontSizes.embedModalHeader` | `string` | Embed modal header text size |
 | `fontSizes.questionnaireLink` | `string` | Questionnaire link font size |
 | `fontSizes.questionnaireLabel` | `string` | Questionnaire label font size |
 | `fontSizes.questionnaireLabelDescription` | `string` | Questionnaire label description font size |
@@ -721,6 +855,8 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `fontSizes.questionnaireLightBotUsername` | `string` | Questionnaire light bot avatar name font size |
 | `fontSizes.questionnaireLightBotBubble` | `string` | Questionnaire light bot bubble font size |
 | `fontSizes.questionnaireLightBotAnswerBubble` | `string` | Questionnaire light bot answer bubble font size|
+| `fontSizes.floatingEmbedHeaderInQueueLoader` | `string` | Floating Embed Header in queue loader position font size |
+| `fontSizez.floatingEmbedHeaderAvatar` | `string` | Floating Embed header Avatar font size |
 | `fontStyle.embedBody` | `string` | Embed body font style |
 | `fontStyle.embedBodyHeading1` | `string` | Embed body heading 1 font style |
 | `fontStyle.embedBodyHeading2` | `string` | Embed body heading 2 font style |
@@ -729,7 +865,14 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `fontStyle.embedBodyHeading5` | `string` | Embed body heading 5 font style |
 | `fontStyle.embedBodyHeading6` | `string` | Embed body heading 6 font style |
 | `fontStyle.embedHero` | `string` | Embed hero font style |
+| `fontStyle.embedHeroTitle` | `string` | Embed hero title font style |
+| `fontStyle.embedHeroAvatar` | `string` | Embed hero avatar font style |
+| `fontStyle.embedHeroTitleInQueue` | `string` | Embed hero title in queue font style |
 | `fontStyle.embedHeroSubtitle` | `string` | Embed hero subtitle font style |
+| `fontStyle.embedHeroSubtitleInQueue` | `string` | Embed hero subtitle in queue font style |
+| `fontStyle.embedHeroErrorTitle` | `string` | Embed hero error title font style |
+| `fontStyle.embedHeroErrorMessage` | `string` | Embed hero error message font style |
+| `fontStyle.embedModalHeader` | `string` | Embed modal header font style |
 | `fontStyle.questionnaireLink` | `string` | Questionnaire link font style |
 | `fontStyle.questionnaireLabel` | `string` | Questionnaire label font style |
 | `fontStyle.questionnaireLabelDescription` | `string` | Questionnaire label description font style |
@@ -756,7 +899,14 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `fontVariant.embedBodyHeading5` | `string` | Embed body heading 5 font variant |
 | `fontVariant.embedBodyHeading6` | `string` | Embed body heading 6 font variant |
 | `fontVariant.embedHero` | `string` | Embed hero font variant |
+| `fontVariant.embedHeroTitle` | `string` | Embed hero title font variant |
+| `fontVariant.embedHeroAvatar` | `string` | Embed hero avatar font variant |
+| `fontVariant.embedHeroTitleInQueue` | `string` | Embed hero title in queue font variant |
 | `fontVariant.embedHeroSubtitle` | `string` | Embed hero subtitle font variant |
+| `fontVariant.embedHeroSubtitleInQueue` | `string` | Embed hero subtitle in queue font variant |
+| `fontVariant.embedHeroErrorTitle` | `string` | Embed hero error title font variant |
+| `fontVariant.embedHeroErrorMessage` | `string` | Embed hero error message font variant |
+| `fontVariant.embedModalHeader` | `string` | Embed modal header font variant |
 | `fontVariant.questionnaireLink` | `string` | Questionnaire link font variant |
 | `fontVariant.questionnaireLabel` | `string` | Questionnaire label font variant |
 | `fontVariant.questionnaireLabelDescription` | `string` | Questionnaire label description font variant |
@@ -790,7 +940,14 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `fontWeights.embedBodyHeading5` | `string` | Embed body heading 5 font weight |
 | `fontWeights.embedBodyHeading6` | `string` | Embed body heading 6 font weight |
 | `fontWeights.embedHero` | `string` | Embed hero font weight |
+| `fontWeights.embedHeroTitle` | `string` | Embed hero title font weight |
+| `fontWeights.embedHeroAvatar` | `string` | Embed hero avatar font weight |
+| `fontWeights.embedHeroTitleInQueue` | `string` | Embed hero title in queue font weight |
 | `fontWeights.embedHeroSubtitle` | `string` | Embed hero subtitle font weight |
+| `fontWeights.embedHeroSubtitleInQueue` | `string` | Embed hero subtitle in queue font weight |
+| `fontWeights.embedHeroErrorTitle` | `string` | Embed hero error title font weight |
+| `fontWeights.embedHeroErrorMessage` | `string` | Embed hero error message font weight |
+| `fontWeights.embedModalHeader` | `string` | Embed modal header font weight |
 | `fontWeights.questionnaireLink` | `string` | Questionnaire link font weight |
 | `fontWeights.questionnaireLabel` | `string` | Questionnaire label font weight |
 | `fontWeights.questionnaireLabelDescription` | `string` | Questionnaire label description font weight |
@@ -810,20 +967,45 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `fontWeights.questionnaireLightBotBubble` | `string` | Questionnaire light bot bubble font weight |
 | `fontWeights.questionnaireLightBotAnswerBubble` | `string` | Questionnaire light bot answer bubble font weight |
 | `maxWidths.questionnaire` | `string` | Questionnaire maximum width |
+| `sizes.embedQueueSpinner` | `string` | In Queue Spinner size |
+| `sizes.floatingEmbedHeaderInQueueLoader` | `string` | Floating emebed header in queue loader size |
+| `sizes.floatingEmbedHeaderVideoIcon` | `string` | Floating embed header in video icon size |
+| `sizes.floatingEmbedHeaderNewMessageIcon` | `string` | Floating embed header new message icon size |
+| `sizes.floatingEmbedHeaderAvatar` | `string` | Floating embed header avatar size |
+| `sizes.containerEmbedHeaderAvatar` | `string` | Container embed header avatar size |
+| `space.embedHeroTitle` | `string` | Embed hero title margin |
+| `space.embedHeroTitleInQueue` | `string` | Embed hero title in queue margin |
+| `space.embedHeroSubtitle` | `string` | Embed hero subtitle margin |
+| `space.embedHeroSubtitleInQueue` | `string` | Embed hero subtitle in queue margin |
+| `space.embedHeroErrorTitle` | `string` | Embed hero error title margin |
+| `space.embedHeroErrorMessage` | `string` | Embed hero error message margin |
 | `space.embedHero` | `string` | Embed hero spacing |
-| `space.buttonSend` | `string` | Send button spacing |
+| `space.button` | `string` | Default padding for all questionnaire and modal buttons (send and video have separate configs) |
+| `space.buttonSend` | `string` | Send button padding |
+| `space.buttonSendMargin` | `string` | Send button margin |
+| `space.buttonCommandBar` | `string` | Command bar buttons padding |
+| `space.buttonCommandBarMargin` | `string` | Command bar buttons margin |
 | `space.buttonVideo` | `string` | Video button spacing |
+| `space.inQueueText` | `string` | inQueueText text spacing |
+| `space.floatingEmbedHeaderButton` | `string` | Floating Embed header button padding |
+| `space.containerEmbedHeaderButton` | `string` | Container Embed header button padding |
+| `space.floatingEmbedHeader` | `string` | Floating Embed header padding (fixed width and height still will be in use) |
+| `space.containerEmbedHeader` | `string` | Container Embed headerpadding (fixed width and height still will be in use) |
+| `space.floatingEmbedBall` | `string` | Floating embed ball padding |
 | `zIndices.floatingEmbed` | `number` | Floating embed z-index |
 | `zIndices.floatingEmbedBall` | `number` | Floating embed ball z-index |
 | `zIndices.containerHeader` | `number` | Container header z-index |
 | `radii.floatingEmbed` | `string` | Floating embed border radius |
 | `radii.floatingEmbedBall` | `string` | Floating embed ball border radius |
 | `radii.floatingEmbedPromoBubble` | `string` | Floating embed promo bubble border radius |
+| `radii.floatingEmbedHeaderButton` | `string` | Floating embed header button border radius |
+| `radii.containerEmbedHeaderButton` | `string` | Container embed header button border radius |
 | `radii.embedHero` | `string` | Embed hero border radius |
 | `radii.buttonFilled` | `string` | Filled button border radius |
 | `radii.button` | `string` | Button border radius |
 | `radii.buttonText` | `string` | Text button border radius |
 | `radii.buttonSend` | `string` | Send button border radius |
+| `radii.buttonCommandBar` | `string` | Command bar buttons border radius |
 | `radii.buttonVideo` | `string` | Video button border radius |
 | `radii.modal` | `string` | Modal border radius |
 | `radii.input` | `string` | Input border radius |
@@ -848,7 +1030,14 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `lineHeights.embedBodyHeading5` | `string` | Embed body heading 5 line height |
 | `lineHeights.embedBodyHeading6` | `string` | Embed body heading 6 line height |
 | `lineHeights.embedHero` | `string` | Embed hero line height |
+| `lineHeights.embedHeroTitle` | `string` | Embed hero title line height |
+| `lineHeights.embedHeroAvatar` | `string` | Embed hero avatar line height |
+| `lineHeights.embedHeroTitleInQueue` | `string` | Embed hero title in queue line height |
 | `lineHeights.embedHeroSubtitle` | `string` | Embed hero subtitle line height |
+| `lineHeights.embedHeroSubtitleInQueue` | `string` | Embed hero subtitle in queue line height |
+| `lineHeights.embedHeroErrorTitle` | `string` | Embed hero error title line height |
+| `lineHeights.embedHeroErrorMessage` | `string` | Embed hero error message line height |
+| `lineHeights.embedModalHeader` | `string` | Embed modal header line height |
 | `lineHeights.buttonFilled` | `string` | Filled button line height |
 | `lineHeights.button` | `string` | Button line height |
 | `lineHeights.buttonText` | `string` | Text button line height |
@@ -923,6 +1112,7 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `color` | `string` | Text color |
 | `padding` | `string` | Padding around text |
 | `margin` | `string` | Margin around element |
+' `fontSize`| `string` | Text component default font size |
 | `hide` | `boolean` | Whether element is hidden by default |
 | `logic` | `object` | Conditional logic for element |
 | `logic.conditions` | `array` | Array of condition objects (same as Logic Item conditions) |
@@ -945,6 +1135,7 @@ install using `npm i ninchat-embed` or link main directly from ninchat.com:
 | `variant` | `'primary'` | Button variant style |
 | `target` | `string` | Target view ID |
 | `align` | `'center' \| 'right' \| 'left'` | Button alignment |
+| `clearAfter` | `boolean` | Clear float after current element |
 | `textAlign` | `'center'` | Text alignment within button |
 | `inline` | `boolean` | Whether button is displayed inline |
 | `iconLeft` | `object` | Left icon configuration |
@@ -1235,8 +1426,8 @@ Ninchat.route(Route)
 | ActivityCount | activity_count | `activity`: number, `highlights`: number | Typical use case for `ActivityCount` is to display activity as a number in host sites favicon. `activity` property contains the total activity including `highlights`. `highlights` are activity which has importance based on users settings or their role. Eg. highlight can be a name mention or a visitor requesting an audience. |
 | AudienceEnded | audience_eneded | `audience_id`: string | Emitted when an audience session ends |
 | AudienceClosed | audience_closed | `audience_id`: string | Emitted when the chat is closed |
-| SessionCreated | session_created | `user_queues?`: {[queue_id]: {`delivery_time`, `queue_time`, `realm_id`, `queue_attrs`: {`name`, `length`, `group_id`, `is_group`, `unassigned_registered`}}}, `user_channels?`: {[channel_id]: {`channel_attrs`, `channel_status?`, `realm_id?`}} | Emitted when a user session is created with queue and channel information |
-| QueueUpdated | queue_updated | `queue_id`: string, `queue_attrs`: {`name`, `length`, `group_id`, `is_group`, `unassigned_registered`}, `queue_time?`: number, `realm_id?`: string | Emitted when queue information is updated |
+| SessionCreated | session_created | `user_queues?`: {[queue_id]: {`delivery_time`, `queue_time`, `unassigned_registered_time`, `realm_id`, `queue_attrs`: {`name`, `length`, `group_id`, `is_group`, `unassigned_registered`}}}, `user_channels?`: {[channel_id]: {`channel_attrs`, `channel_status?`, `realm_id?`}} | Emitted when a user session is created with queue and channel information |
+| QueueUpdated | queue_updated | `queue_id`: string, `queue_attrs`: {`name`, `length`, `group_id`, `is_group`, `unassigned_registered`}, `queue_time?`: number, `unassigned_registered_time?`: number, `realm_id?`: string | Emitted when queue information is updated |
 | ChannelUpdated | channel_updated | `channel_id`: string, `channel_attrs`: {`audience_id`, `queue_id`, `name`, `closed`}, `channel_status?`: string, `realm_id?`: string | Emitted when channel information is updated |
 | ContainerInitialized | container_initialized | - | Emitted when the embed container is initialized |
 
@@ -1431,10 +1622,22 @@ Ninchat.route(route)
 
 ## Release history
 
+### v2.7.0
+
+- expose unassigned_registered parameter to sessionCreated and QueueUpdated events
+- add hideMenubar property for 'app' embed version
+- support for questionnaire attachments
+- configUrls merging improvements
+- variety od new embed customizations and bugfixes
+
 ### v2.6.2
 
 - fix RegisteredAudience route metadata composition and audience metadata sharing
 
+### v2.6.1
+
+- fix RegisteredAudience route metadata composition from transcript data
+
 ### v2.6.0
 
 - extend QueueUpdated event to include information about unassigned_registered