Skip to main content
Visit Freshworks.com Visit Freshworks

Hey everyone, hope everyone in the community is well!

I’m a new customer to Freshworks, FreshDesk and FreshChat so I’m learning my around each of the systems stage-by-stage.

I do have a question in regards to the Custom CSS Editor, within the Web Chat settings (Within the Freshchat product)

I have already inspected various classes, and applied those styles in to the CSS Editor, and used the !important flag as a way to overrule specific styles, but I am a little confused, to whether the preview of the chat embed (I’m referring to the preview panel of the chat window) should be updating in real-time as I’m applying my Custom CSS updates?

As it seems no matter which custom styles I am implementing, nothing seems to be updating in terms of the style of the chat within the preview panel.

Am I missing a trick somewhere? Ideally, I’m wanting to change the ‘div.body’ background colour through targeting that specific class.

Does anyone have any pointers on how to achieve this? I have searched around different topics online, but I can’t seem to find many topics relevant to the customisation of the Web Chat widget within FreshChat.

Thanks!

Jay. 

Hey @jayjay29 :

I understand your concern, by applying the CSS is not reflecting in the live preview.

Can you please just save any CSS style in the the widget settings, but copy the widget code and try in it any online JS script editor like jsbin.com or js.do to check if you are getting desired results?

Also, can you please help with a screenshot which background color you would like to change? Let me check the feasibility and update you with the CSS

Thanks.

Hello there,

Thank you for your response! So on my chat bot widget, I am trying to change the CSS for the “:hover” state, for the following class:

 div.home-content > div.body.sections.faq-body > div.card-layout.scroll-section > div.channel-section.animated.fadeInUp.delay.faster.h-categories > ul > li:hover 

It appears that there’s some sort of CSS animation for the hover state of the channel list items that you see when you first open the Chat widget (E.g. The area of where the “Chat to us” and “FAQs” section would appear.

Would you be able to advise on a way to change the colour of the animated hover state? At the moment the hover effect is displaying white, but I am trying to create a dark mode layout, so I was hoping the hover element could be something along the lines of #333333.

 

Thank you!.

 

 

 

Reply


Terms of Use