NowAssist Enhanced Chat - How to Increase Size of the Virtual Agent Icon?Issue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Unable to make the the size of the Enhanced Chat widget icon bigger. In the "classic" virtual agent, we could change the size of the widget through a CSS connected with the Portal Theme. However, it is not possible to do the same for the Enhanced Chat widget. Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Yokohama and above Cause<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } PRB1943211 Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } This is a known issue which has been reported and monitored under #PRB1943211 Workaround:Please add the following script to your client controller of "Now Assist Dialog" Widget to fix the issue temporarily, you can adjust the scaleSize in the last line according to your convenience. This script will try to adjust the icon size that is being passed to the bottom right button that triggers VA. Script:function adjustFABSize(newScaleSize) { function deepSearchElement(selector, root) { root = root || document.body; var queue = [root]; while (queue.length > 0) { var top = queue.shift(); var ele = top.querySelector(selector); if (ele) return ele; var topShadow = top.shadowRoot; if (topShadow) queue.push(topShadow); var allSearched = top.querySelectorAll('*'); for (var i = 0; i < allSearched.length; i++) { if (allSearched[i].shadowRoot) { queue.push(allSearched[i].shadowRoot); } } } return null; } function waitForChild(parentEl, selector, callback, interval, timeout) { var elapsed = 0; var poll = setInterval(function () { try { var child = deepSearchElement(selector, parentEl); if (child) { clearInterval(poll); callback(child); } else if (timeout && (elapsed += interval) >= timeout) { clearInterval(poll); } } catch (e) { } }, interval); } var insertStylesIntoElement = function (elm) { if (!elm || !elm.shadowRoot) return; var style = document.createElement('style'); style.type = 'text/css'; style.textContent = ':host{--now-icon--scale-size: ' + newScaleSize + ';}'; elm.shadowRoot.appendChild(style); } waitForChild($element[0], "sn-nass-sp-sparkle-icon", insertStylesIntoElement, 100, 10000); } // Adjust the value being passed according to the customer's need. adjustFABSize(2); - Ensure these changes are marked as replace on upgrade to get the latest changes to the widget on instance upgrade.