Skip to main content
Solved

Editing Custom CSS for Web Chat

  • October 30, 2024
  • 3 replies
  • 158 views
J
Apprentice
Forum|alt.badge.img

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. 

Best answer by Aparna-narayanan

hi ​@jayjay29 

 

Can u try the folllwing custom css for the query u have shared

li:hover {
    .channel-link .h-category-item {
    background-color: #333333 !important; 
    }
  }

Additional if u like to change the font color u can change them with this:

ul.channel-list li .channel-link .h-category-item .channel-names .channel-content .h-category-detail:hover h2, div.welcome-text {
color: white !important; 
}

Please use the preferred color as required. Hope this was helpful. Please share screenshot of the element further queries.

 

Thanks!

View original
Did this topic help you find an answer to your question?

3 replies

srikanthkarunakaran
Community Manager
Forum|alt.badge.img+6

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.

Senior Technical Product Specialist, Srikanth NK
Kamakshi V
J
2 people like this
  • Kamakshi V
    Kamakshi V
  • J
    jayjay29
J
Apprentice
Forum|alt.badge.img
  • jayjay29
  • Author
  • Apprentice
  • 1 reply
  • November 13, 2024

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!.

 

 

 

Kamakshi V
1 person likes this
  • Kamakshi V
    Kamakshi V
Aparna-narayanan
Community Debut
Forum|alt.badge.img

hi ​@jayjay29 

 

Can u try the folllwing custom css for the query u have shared

li:hover {
    .channel-link .h-category-item {
    background-color: #333333 !important; 
    }
  }

Additional if u like to change the font color u can change them with this:

ul.channel-list li .channel-link .h-category-item .channel-names .channel-content .h-category-detail:hover h2, div.welcome-text {
color: white !important; 
}

Please use the preferred color as required. Hope this was helpful. Please share screenshot of the element further queries.

 

Thanks!

Reply


Most helpful members this week

Terms of UsePrivacy Notice