-
Issue description: AI chatbots quick replie options are all capitilized and also being cut off. Neither should be that way.
-
Link to the page with the widget in question: begeventgroup.com
2 Likes
Hi there, @user25413 
I am so sorry about this inconvenience!
This issue occurs because of the conflict with the styles of your website. You can fix the issue with the capitalized letters using this code in the Custom CSS field on the Settings tab of your widget’s settings:
.es-quick-reply-button {
text-transform: none !important;
}
As for the quick replies padding and close button display issues, I’ve passed it on to the devs and will update you once it’s fixed 
1 Like
Hey! So that fixed the issues, with that said we now have this phone number country select
button acting weird
2 Likes
Our devs will provide a solution for this issue too. I’ll keep you updated
1 Like
Hi @user25413
Thank you for waiting!
We’ve fixed all issues using the CSS code below:
.es-quick-reply-button {
font-size: 15px;
text-transform: none !important;
border-radius: 18px;
padding: 8px 12px;
}
.es-quick-reply-button:hover {
background-color: rgb(0, 185, 241) !important;
}
[class*='close-button'] {
border-radius: 12px;
background-color: rgb(243, 243, 243);
padding: 0;
}
[class*='close-button']:hover {
background-color: rgb(243, 243, 243);
}
.es-header-button-new-chat,
.es-header-button-transcript,
.es-header-button-size,
.es-header-button-close {
border-radius: 16px;
color: rgba(255, 255, 255, 0.5) !important;
background: transparent !important;
padding: 2px;
}
.es-header-button-new-chat:hover,
.es-header-button-transcript:hover,
.es-header-button-size:hover,
.es-header-button-close:hover {
color: rgb(255, 255, 255) !important;
background: rgba(255, 255, 255, 0.05) !important;
}
.es-interaction-field-submit-button {
border-radius: 14px;
padding: 1px 6px;
}
.es-interaction-field-submit-button:hover {
background-color: rgb(0, 185, 241) !important;
}
[class*='FlagDropdownTrigger__Container-sc'] {
background-color: transparent !important;
border-radius: 5px;
padding: 2px 1px 2px 3px;
}
[class*='FlagDropdownTrigger__Container-sc']:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
}
.es-scroll-to-end-button {
border-radius: 14px;
background-color: rgb(64, 64, 64) !important;
padding: 1px 6px;
}
Please check your website and let me know if the widget looks fine now
1 Like