Posted: 15 Oct 2018 1:21 EDT Last activity: 17 Feb 2021 10:12 EST
Pega chat UI changes
Hi, how to customise Pega chat popup using CSS ? I tried applying CSS overrides in the application skin custom CSS but the styles are not applied. Think pega chat is firefly product and it's rendered outside the CS app, what is the way to customise the chat conversation message and window title like font, colour, size ?
Even though the chat client is outside of CS, you can still change it's look and feel from the Chat Server landing page in CS. There's a tab called Customer Chat Client in the server configuration page that you access from the main menu in the Designer Studio. You can change the Font Families, colors and background colors for the header, user/agent/system text and chat launcher.
Hi Amit, thanks for your response. I had a look at it and the requirement is to make changes more than that for example, I had to remove the headset icon and remove the footer where there is a message says "Powered by pega", few more things like window icon ? Is it possible ?
Hi Siva, those are possible, however not configurable using the Chat Server configuration page. All those items have CSS identifiers using either Class name or ID name. You can add some CSS to each of the pages where chat is displayed and hide it. By setting display:none on two of the elements, I was able to get the following screen shot.