Webchat Icon customization

[charaf_ed]

Hello,

I would like to modify the built-in icon used in my Genesys widget.

According to the documentation, I need to add this div id to my HTML then use the jQuery to replace the old icon.

<div id="your-element" class="cx-icon" data-icon="chat"> ...SVG icon will be inserted here </div>

You then pass your element as a jquery wrapped set or HTML string into
the CXCommon.populateAllPlaceholders( $("#your-element") ) function,
Widgets will insert the appropriate SVG icons into each specified
element and return the HTML to you.

I couldn't change the icon though.

Any ideas to change it ?

Regards,

[Angelo_Cicchitto]

Hello, thanks for raising this!

The idea with Icons is that we allow the following:

1. Customization of Icon color.
2. Re-using the existing product icons into other custom Widgets extensions or container that you may want to build, to retain consistency across elements.

For #1, you could go through the full theme customization by modifying the provided LESS file according to your branding requirements, and then convert into CSS file based on many Less to CSS online converters. For quick test, you could apply a direct CSS override like this (for Dark theme override), just to see the end result:

.cx-widget.cx-theme-dark .cx-svg-icon-tone1 {
	 fill: #5081E1; /* your color here */
}

Currently, icons cannot be altered or replaced, as per documentation.

[charaf_ed]

Thank you @Angelo_Cicchitto for the information

Great day

CHARAF