+1Hello,
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!
Best answer by Bottleneck1212
Here’s how you can remove the background from a floating chat 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.
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.
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! 😊
+6Hi
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.
+1Hi @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;
}
}
It turns out that if the site is set to dark theme by default, I see this error.
However, the error still exists, during initialization there is a white background flashing, for about two seconds, then it disappears
+2Here’s how you can remove the background from a floating chat 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.
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.
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! 😊
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
