Changing the icon image used for chat when enhanced chat is enabled - Support and Troubleshooting

Changing the icon image used for chat when enhanced chat is enabled Issue Problem With enhanced chat enabled, how to change the AI-Sparkle Chat Icon?

Release Generic

Cause Root Cause 1. Enhanced Chat does not have an out-of-the-box (OOB) option for changing the default 'ai-sparkle-fill' icon.

Resolution Steps to Resolve

Enhanced Chat does not have an out-of-the-box (OOB) option for changing the default "ai-sparkle-fill" icon. The default styling for Enhanced Chat limits visibility and customization of the icon. The use of certain themes might lack required CSS variables for proper icon display.

Custom Icon Replacement using CSS

1. Upload Custom Icon: Navigate to System UI > Images and upload your desired icon to the `db_image` table. Ensure the image is in SVG format for compatibility. 2. Modify Portal Theme: Go to the theme settings for your portal. Add the CSS variable `$now-sp-nass-FAB-icon` to the CSS section. 3. Implement Changes: Apply these changes within the portal’s theme settings to ensure the new icon replaces the default. 4. Addressing Missing CSS Variables: If using a theme such as 'Stock', ensure the following CSS variables are added.

For more information, review => Replacing the AI-Sparkle Chat Icon in Enhanced Chat [Now Assist in Virtual Agent]

To update the size of the icon, you can do this: - Navigate to "Now Assist Dialog" Widget and customize the client controller by adding the following code.

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; }

}, 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);

Note for the icon size: 1. This works only if the custom image is already configured using the theming variable - $now-sp-nass-FAB-icon 2. You can adjust the value being passed to the scaleSize according to their need.