Chatbot and Button widget customization

Ask the Community Customization
,
1

Everything works except for actually hiding the Ai Chat button it instead hides the button widget. Any code to change this? I’ve tried changing CSS class to the class in the JS without any luck.

2 Likes
2

Hi @Shawn_Martin1 :waving_hand:

Could you please send us a link to the page, where your AI Chatbot and Button widgets are installed?

1 Like
3

Yes sure will here it is… was also looking for the button widget CSS to add padding to the left and right to match up the button above it?

[

ca00782e825e0cbda36d2d457f04c3c2.jpg
ca00782e825e0cbda36d2d457f04c3c2.jpg744×372 79.7 KB

Chanticlear Pizza - Pizza Restaurant • Isanti, MN 55040
app.vrtz.cc
](https://app.vrtz.cc/vcard-template)

Thanks Max!

2 Likes
4

Thank you!

We’ve added this code to the AI Chatbot widget:

[class*="FloatingButton__FloatingButtonContainer-sc"] {
  visibility: hidden;
}

[class*="shadow__ShadowContainer-sc"] {
  height: auto !important;
}

And this code was added to the Custom CSS field of your Button widget:

[class*="ButtonBase__ButtonContainer-sc"] {
  width: 80%;
}

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

2 Likes
5

That’s awesome Max! Thank you. What is the class to add hover effects? Would like to add text-decoration: underline to it?

2 Likes
6

Could you please specify what text should be underlined?

1 Like
7

The words “Ai Chat” inside the button only on hover.

2 Likes
8

Please try to use this CSS code and let me know if it helped :slightly_smiling_face:

[class*="ButtonInner__ButtonLabel-sc"]:hover {
  text-decoration: underline;
}