ICON display in Genesys Interaction Widget

[Bhagyaraju_Pati]

Hi Team,
I am trying to load the custom icon in Genesys interaction widget, but I am not able to see the icon instead it is appearing as a blank square. Below screenshot for your reference.

The original picture that I wanted to display is below

Kindly let me know how can I display this in place of the interaction widget icon.

Regards,
Bhagyaraju Pati

[Jerome.Saint-Marc]

Hello,

What have you defined in the Advanced tab of your Interaction Widget integration?

You must have something similar to this - monochromicIcon and icon attributes (monochromicIcon has precedence):

{
     "lifecycle": {
       "ephemeral": false,
       "hooks": {
         "stop": false,
         "blur": false,
         "focus": false,
         "bootstrap": false
       }
     },
     "icon": {
        "48x48": "https://raw.githubusercontent.com/GenesysCloudBlueprints/chat-translator-blueprint/main/blueprint/images/ear%2048x48.png",
        "96x96": "https://raw.githubusercontent.com/GenesysCloudBlueprints/chat-translator-blueprint/main/blueprint/images/ear%2096x96.png",
        "128x128": "https://raw.githubusercontent.com/GenesysCloudBlueprints/chat-translator-blueprint/main/blueprint/images/ear%20128x128.png",
        "256x256": "https://raw.githubusercontent.com/GenesysCloudBlueprints/chat-translator-blueprint/main/blueprint/images/ear%20256x256.png"
    },
     "monochromicIcon": {
       "vector": "https://raw.githubusercontent.com/GenesysCloudBlueprints/chat-translator-blueprint/main/blueprint/images/ear.svg"
     }
   }

Regards,

[Bhagyaraju_Pati]

Hi Jerome,

Thanks for the reply, yes I have defined them in the advanced tab.
My monochromeIcon url is https://agentassist.kore.ai/koreaiaa-premiumapp/premium-app-sample/logo.svg

even after defining the icon I can see only blank square instead on my icon.

Please let me know, if any defined properties are need for the icon (i.e color, size, etc)

Regards,
Bhagyaraju Pati

[Jerome.Saint-Marc]

Hello,

The problem is with your svg.
When displaying the interaction widget's icon, Genesys Desktop applies a set of filters (css filters on the svg - saturate, invert, ...) to display it in the UI (as monochrome). You have apparently different zones with fill ("path") in your svg that seem seem to be an issue when applying these filters - result is just gray.

You can load it as "icon". Genesys Desktop treats this one differently (not applying css svg filters) - it should just get to monochrome.

{
     "lifecycle": {
       "ephemeral": false,
       "hooks": {
         "stop": false,
         "blur": false,
         "focus": false,
         "bootstrap": false
       }
     },
     "icon": {
       "vector": "https://agentassist.kore.ai/koreaiaa-premiumapp/premium-app-sample/logo.svg"
     }
   }

Regards,