Customize WebChat UI (logo, background, buttons position in the widget)

[Fngugi]

Hello. I am trying to customize the look and feel of WebChat widget. Are we able to change the logo, icons, chat button and background color/image. I have tried using themes https://all.docs.genesys.com/WID/Current/Developer/GWCCustomize but this is limited. Is there a guide that one can follow? Kindly assist. Urgent.

[Jerome.Saint-Marc]

Hello,

What is described in the link you have referenced above is the only level of customization (appearance) which is supported with Genesys Widgets v2.0.
Logos and icons are not part of the supported and documented customization.

You should be able to change the background color (using a custom theme).
theme-template-dark.less or theme-template-light.less, provided in the page/link you have referenced, should give you a better idea of what class/style can be modified.

Regarding chat buttons, I am not sure to which ones you are referring to.
If you mean the fields/input which is collected from the customer, it can be achieved with a Custom Chat Registration Form.
If you mean Start chat button, you can only change the text (using Localization).

Regards,

[Fngugi]

Hello,
Thanks for getting back. Does this mean that I cannot be able to update my current UI below on the parts highlighted with blue and the footer? Then it could be very limiting

I want to have this as the end result

[Jerome.Saint-Marc]

Are you trying to connect to a Genesys Cloud platform (formerly known as PureCloud) or to a Genesys Engage platform (On-Premise or Cloud)?

The screenshot you included shows file attachments which is not supported with Genesys Cloud Web Chat (synchronous chat).

File attachment (pictures) is only supported with Genesys Cloud Web Messaging (or with chat with the Engage platform).

The built-in UI for Genesys Cloud Web Messaging is Messenger (different from Genesys Widgets).
What is supported with Messenger UI (configuration) is described here and here.

Regards,

[Fngugi]

I am connecting to Genesys Cloud Web Chat. Ignore the file attachment on the screenshot. How can I customize the chat Icon, Agent avatar and the background. Also the footer (close/cancel) to resemble the UI design.

[tim.smith]

If the documented customization/stylization options Jerome linked above fall far short of your needs and visual customization the most important issue for you, you may choose to build your own chat interface from the ground up using the Guest Chat APIs.

[Jerome.Saint-Marc]

Hello,

It won't be possible to achieve all the changes you have highlighted in your screenshot. So, as suggested by Tim, you may want to build your own interface from the ground using the Guest Chat API.

Regarding what you highlighted in your screenshot.

• User icon in header: Not possible - this icon can't be changed
• Dynamic Text/Title in the header: Not possible. You can change the "Live Chat" text using Localization. But it will be a static value. It can't be a text changed once you connect to an agent (no dynamic content).
• Agent Icon: Yes. This is done via configuration in Genesys Cloud (not via Widgets customization). You will have to define an agent image at the user configuration level.
• Disconnected and Chat ended text: You can change the text (using Localization) but it is not possible to totally remove these entries when the customer disconnects.
• Genesys icon in the footer: Not possible. The icon can't be removed.
  Changing the area for message typing and moving the close button at the bottom: Not possible.

Regards,

[Fngugi]

Hello. This is well explained.
I suggest that you consider such customizations going forward. Cheers!

[tim.smith]

If you have specific suggestions for customization options you'd like to see added, please share them with your use case at https://genesyscloud.ideas.aha.io/. Thanks!