Customize Interaction Widget Icon

[mayarashwan]

Hello, i'm trying to customize the icon of two interaction widgets which are integrating with SAP. Thus i can not use the icon of SAP for both app.
Is their a way to customize or use genesys icons like in this link "Customize appearance - Genesys Documentation" ?

Thanks,

[Jerome.Saint-Marc]

Hello,

The tab icon can be customized at the Interaction Widget integration level.

Select the Interaction Widget integration corresponding to the application/tab you want to customize (in Genesys Admin - Integrations - Integrations).
Click on the Configuration tab, and select Advanced section.
The Advanced Configuration can be an empty json ("{}") if nothing specific has been configured.
As it is showing an icon, it is possibly already customized for icons.
See here for information on application and tab icons.

The Advanced configuration on Interaction Widget integrations accepts a JSON schema (with i10n to localize the application name, lifecycle, icon and monochromicIcon).
Something like what's shown in this page:

{
    "i10n": {
        "es": {
            "name": "Genesys Cloud ejemplo de la Ayuda"
        },
        "fr": {
            "name": "Genesys Cloud Aide Exemple"
        }
    },
    "lifecycle": {
        "ephemeral": false,
        "hooks": {
            "bootstrap": false,
            "focus": false,
            "blur": false,
            "stop": false
        }
    },
    "icon": {
        "vector": "https://mypurecloud.github.io/client-app-sdk/img/066-lifebuoy.svg",
        "24x24": "https://mypurecloud.github.io/client-app-sdk/img/066-lifebuoy-24x24.png",
        "36x36": "https://mypurecloud.github.io/client-app-sdk/img/066-lifebuoy-36x36.png",
        "48x48": "https://mypurecloud.github.io/client-app-sdk/img/066-lifebuoy-48x48.png",
        "72x72": "https://mypurecloud.github.io/client-app-sdk/img/066-lifebuoy-72x72.png"
    }
}

Regards,

[mayarashwan]

Thanks Jerome for your reply.
Can i customize my own icon using photoshop and we upload it in this project https://github.com/MyPureCloud/client-app-sdk/tree/master/examples/img?

[Jerome.Saint-Marc]

"Can i customize my own icon using photoshop"
You can use any tool. You just need to create a monochrome icon, and save it in SVG format or in PNG format (72x72 pixels or 48x48 pixels or ...).

"we upload it in this project"
No. You just need to make your icon/image available via a public url. And you'll configure this url in your interaction widget integration (Advanced configuration) through the JSON schema I have posted above.
You can set the monochromicIcon vector (with the url to an SVG monochrome image) or the monochromicIcon 72x72 or 48x48 or ... (with the url to a PNG monochrome image).

Regards,

[mayarashwan]

okay thank you.

[mayarashwan]

I have created my own icon on photoshop and uploaded on github https://github.com/mayahossam/C4C-Images/blob/main/image3.jpg but when i try to use it, it doesn't work. Any advice?

[Jerome.Saint-Marc]

Hello,

Convert your image to PNG format, save it at different sizes (24x24, 36x36, 48x48, 72x72) and set the path in "icon" attribute/structure.
I think the displayed size is around 24x24.
Note that the tab image will be displayed in monochrome.

{
  "lifecycle": {
    "ephemeral": false,
    "hooks": {
      "stop": false,
      "focus": false,
      "blur": false,
      "bootstrap": false
    }
  },
  "i10n": {
    "en": {
      "name": "Genesys Cloud Interaction Example"
    },
    "fr": {
      "name": "Genesys Cloud Exemple Interaction"
    },
    "es": {
      "name": "Genesys Cloud ejemplo Interaction"
    }
  },
  "icon": {
    "48x48": "https://github.com/mayahossam/C4C-Images/blob/main/image3-48x48.png",
    "36x36": "https://github.com/mayahossam/C4C-Images/blob/main/image3-36x36.png",
    "24x24": "https://github.com/mayahossam/C4C-Images/blob/main/image3-24x24.png",
    "72x72": "https://github.com/mayahossam/C4C-Images/blob/main/image3-72x72.png"
  }
}

Or convert it to SVG format, and set the path in "icon" attribute/structure.

{
  "lifecycle": {
    "ephemeral": false,
    "hooks": {
      "stop": false,
      "focus": false,
      "blur": false,
      "bootstrap": false
    }
  },
  "i10n": {
    "en": {
      "name": "Genesys Cloud Interaction Example"
    },
    "fr": {
      "name": "Genesys Cloud Exemple Interaction"
    },
    "es": {
      "name": "Genesys Cloud ejemplo Interaction"
    }
  },
  "icon": {
    "vector": "https://github.com/mayahossam/C4C-Images/blob/main/image3.svg"
  }
}

Regards,

[mayarashwan]

I tried both approach and they're not working .
Below are my configuration:
SVG Format
{
"lifecycle": {
"ephemeral": false,
"hooks": {
"stop": false,
"focus": false,
"blur": false,
"bootstrap": false
}
},
"i10n": {
"en": {
"name": "Genesys Cloud Interaction Example"
},
"fr": {
"name": "Genesys Cloud Exemple Interaction"
},
"es": {
"name": "Genesys Cloud ejemplo Interaction"
}
},
"icon": {
"vector": "https://github.com/mayahossam/C4C-Images/blob/main/image3.svg"
}
}

Different Sizes
{
"lifecycle": {
"ephemeral": false,
"hooks": {
"stop": false,
"focus": false,
"blur": false,
"bootstrap": false
}
},
"i10n": {
"en": {
"name": "Genesys Cloud Interaction Example"
},
"fr": {
"name": "Genesys Cloud Exemple Interaction"
}, "es": {
"name": "Genesys Cloud ejemplo Interaction"
}
},
"icon": {
"48x48": "https://github.com/mayahossam/C4C-Images/blob/main/image3(48).png",
"36x36": "https://github.com/mayahossam/C4C-Images/blob/main/image3(36).png",
"24x24": "https://github.com/mayahossam/C4C-Images/blob/main/image3(24).png",
"72x72": "https://github.com/mayahossam/C4C-Images/blob/main/image3(72).png"
}
}

Appreciate your support .

Thanks,

[Jerome.Saint-Marc]

The url you are using (like https://github.com/mayahossam/C4C-Images/blob/main/image3(48).png) do not correspond to an image. It returns an html page (the one you see when you click on that link).

The real url to your images are the ones you get when clicking on download (in the github page):
"48x48": "https://raw.githubusercontent.com/mayahossam/C4C-Images/main/image3(48).png",
"36x36": "https://raw.githubusercontent.com/mayahossam/C4C-Images/main/image3(36).png",
"24x24": "https://raw.githubusercontent.com/mayahossam/C4C-Images/main/image3(24).png",
"72x72": "https://raw.githubusercontent.com/mayahossam/C4C-Images/main/image3(72).png",
"vector": "https://raw.githubusercontent.com/mayahossam/C4C-Images/main/image3.svg"

Change the url path in your configuration, refresh your Genesys Desktop UI (click on Reload this page in your web browser, or Logout and Login again - it needs a refresh to pick the new configuration of your Interaction Widget).

Regards,

[mayarashwan]

Thanks for your support, it's working