Elfsight chatbot CSS theme gets overwritten by WordPress Elementor CSS theme

Ask the Community General Questions
, ,
1

  • **Issue description: The elfsight chatbot CSS theme is not applied corrected when it loads on the WordPress website. The problem is the size/color of the chat buttons (hover as well) is larger/different on the WordPress website than it is on the elfsight dev environment. I want the same look and feel as the elfsight dev environment. How can I achieve this?

    I have tried to add CSS template in WordPress and CSS template in elfsight - both did not work. It seems the WorkPress CSS template is overwriting the elfsight CSS template. Kindly provide guidance.**

  • Link to the page with the widget in question: Accueil - Piscine Noah

2 Likes
3

Hi there, @Gazon_Tropical :waving_hand:

We’ve fixed this issue with this code added to the Custom CSS field on the Settings tab of your widget’s settings:

.es-interaction-field-submit-button,
.es-quick-reply-button {
  background: rgb(5, 186, 241) !important;
  font-size: 15px;
  border-radius: 18px;
  text-transform: none;
  font-weight: normal;
  color: white !important;
}

.es-interaction-field-submit-button {
  padding: 0;
}

.es-circle-button-button,
[class*='FlagDropdownTrigger__Container-sc'] {
  color: rgba(255, 255, 255, 0.5);
  background: transparent !important;
}

[class*='FlagDropdownTrigger__Container-sc']:hover {
  background: rgba(17, 17, 17, 0.05);
}

.es-circle-button-button:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.05);
}

Please check your website and let me know if everything is fine now :slightly_smiling_face:

1 Like
4

Hi Max,

Thank you for the update regarding the CSS fix.

I have included my colleague, Abid, who manages this tool, to this thread. Abid, could you please review the implementation and confirm if the widget is functioning correctly?

Upon my initial review, the chatbot does not appear to be visible on the website. Please let us know if further adjustments are required.

1 Like
5

Hi there, @Gazon_Tropical :waving_hand:

I’ve just checked your website and the AI Chatbot is displayed correctly now:

image
image1897×985 407 KB


If the widget still doesn’t show up on your end, please try to check your website in incognito mode and let me know if you see the widget there :slightly_smiling_face: