Dear Community,
If you are looking for a CSS code that will convert the AI Chatbot’s widget scrollbar to a modern, attractive style, look no further. The CSS code provided below will do just that. It works for all browsers. Verified.
Give it a spin!
Useful Tip: I am not fond of hiding scrollbars for the sake of a “cleaner UI.” Many times, hiding scrollbars will render other element functions inoperable.
/* Apply to the element that scrolls */
[class*="scrollable-container__ScrollableContainer-sc"] {
scrollbar-width: thin;
/* Firefox */
scrollbar-color: #aaa transparent;
/* Firefox */
}
/* Chrome, Edge, Safari */
[class*="scrollable-container__ScrollableContainer-sc"]::-webkit-scrollbar {
width: 6px;
/* ← Adjust scrollbar width */
}
[class*="scrollable-container__ScrollableContainer-sc"]::-webkit-scrollbar-track {
background: transparent;
}
[class*="scrollable-container__ScrollableContainer-sc"]::-webkit-scrollbar-thumb {
background-color: #999;
/* Color of the thumb */
border-radius: 10px;
/* Make it rounded */
border: 2px solid transparent;
/* Optional: space around thumb */
background-clip: content-box;
