Question
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 ?
Regards
Siva
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 ?
Regards
Siva
Accepted Solution
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.
Hi Amit, thanks again. I understand how we do it to hide them, but where do you add these CSS styling ? Do we add it to the CS app skin CSS files ? Or is it somewhere else ?
Regards
Siva
Thanks Amit for the information, understood that we apply styles at the parent window.
Regards
Siva
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.