Bhagyaraju_Pati | 2023-05-02 13:49:57 UTC | #1
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 | 2023-05-02 15:15:39 UTC | #2
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 | 2023-05-03 04:39:12 UTC | #3
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 | 2023-05-03 12:05:03 UTC | #4
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,
system | 2023-06-03 12:05:21 UTC | #5
This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.
This post was migrated from the old Developer Forum.
ref: 19706