Skip to main content

Hello,

I’ve embedded the chat widget on my site, but I’m experiencing difficulties applying custom CSS to remove the white background from the floating widget. I’ve tried targeting various classes but haven’t been successful so far. I’ve included images to illustrate the issue and would appreciate any assistance you can provide.

Thank you!

Hi ​@dionneChelini :

By default the chat widget doesnt comes with white background, could you please share your complete widget code and the CSS you have used to reproduce the issue.


Hi @srikanthkarunakaran

 

Thanks for responding, I managed to resolve the problem, the issue was due to light, dark mode theme settings in my code base. I have shared the custom css below, to help anyone that has a similar issue. 
 

html.fc-widget-small, 
html.fc-widget-small body {
background-color: transparent;

}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
html.fc-widget-small,
html.fc-widget-small body {
font-size: 14px;
background-color: transparent;
color-scheme: dark;
}
}

 


@srikanthkarunakaran I encountered the same error
It turns out that if the site is set to dark theme by default, I see this error.
@dionneChelini suggested a solution to this problem, but shouldn't it be solved on the freshchat side right away?
However, the error still exists, during initialization there is a white background flashing, for about two seconds, then it disappears


Here’s how you can remove the background from a floating chat widget:

1. Inspect the Widget

Right-click on the widget in your browser and choose Inspect (or use Ctrl+Shift+I). This will open the developer tools, where you can locate the specific CSS class or ID responsible for the background.

2. Add Custom CSS

Once you’ve identified the class or ID of the widget, you can apply custom CSS to remove the background. Use this CSS as an example:

#chat-widget, .chat-widget-class {
background: none !important;
box-shadow: none !important; /* Optional: Removes any shadow */
}

Replace #chat-widget or .chat-widget-class with the actual class/ID from the inspection.

3. Apply the CSS

  • Option 1: Add the CSS to your website’s stylesheet.
  • Option 2: If you’re using a platform like WordPress, you can add this CSS via the Customizer or a plugin like Custom CSS & JS.

4. Test Your Changes

Refresh your site and verify the background is removed. If the widget is loaded via an iframe, you’ll need to adjust the styles using the widget provider’s customization options.

If you share more details about the platform or widget you're using, I can refine the steps further! 😊


Reply