Clipping message counter

Ask the Community General Questions
1

So, I have implemented our chatbot but on our website the widget looks different than in the test environment. The implementation is done in WordpPress using the footer.php method.

This is our live widget:

Schermafbeelding 2025-05-02 170743
Schermafbeelding 2025-05-02 170743980×1682 121 KB

What I don’t understand is (1) why the message counter is clipped and (2) why the quick replies are bold even though this is not in my CSS.
In the past, I’ve played around with this CSS but I’ve left it out since. It’s like it still remembers and applies somehow.

This is my added CSS code at the moment (and I have no JS code running):

[class*=“window-header__Title-sc”] {
font-weight: bold;
}

[class*=‘window__Body-sc’] p {
font-size: 16px; !important
}

[class*=‘window__Body-sc’] a {
color: #44056c; // Link color
}

[class*=‘window__Body-sc’] a:hover {
color: #a2d9f7; // Link color on hover
}

[class*=‘window__Body-sc’] a:active {
color: #44056c; // Link color when clicked
}

[class*=‘window__Body-sc’] a:visited {
color: #44056c; // Link color once visited
}

[class*=“window__Body”] {
background: url(https://speeltuindonbosco.nl/wp-content/uploads/2025/04/background-chatbot.png);
background-size: cover;
opacity: 1;
}

Can someone pin point me towards a solution? Thanks!

3 Likes
3

Hi there, @speeltuindonbosco.nl :waving_hand:

Ah, I see the issue and I am so sorry about that!

I’ve passed it on to the devs and will let you know once I have their response :slightly_smiling_face:

1 Like
4

Hi there, @speeltuindonbosco.nl :waving_hand:

We’ve fixed the issue by adding this code to the Custom CSS field on the General tab of your widget’s settings:

.es-bubble-floating-button {
 overflow: visible;
}

.es-quick-reply-button {
 font-weight: 400;
}

Check your website and let me know if it’s fine now :slightly_smiling_face:

1 Like
5

Hey @Max,

Thanks for getting back to me!

It is better in the sense that the clipping is gone and so are the bold letters, obviously given the CSS. But as you can see there is still clipping with the input text and the send button is not round as it should be.

Schermafbeelding 2025-05-05 141420
Schermafbeelding 2025-05-05 141420985×1675 124 KB

Can’t the whole thing be reset? Why is it misformed when there is no cause for it in the CSS?

1 Like
6

This issue appeared because of the conflict with the styles of your website. We’ve added one more CSS code that fixes the issue with the Send Message button and clipping input text:

textarea {
  border-radius: unset !important;
  min-height: unset;
}

[aria-label="Send message"] {
  padding: 0;
}

[aria-label="Send message"]:hover {
  background-color: rgba(68, 5, 108, 0.8);
}

Please check it out and let me know if everything is fine now :slightly_smiling_face:

1 Like