AI Chatbot Conversation button not rounded button

Ask the Community Customization
1

Is there a way to make the "Start conversation button straight corners instead of rounded. All my buttons on my website are like that.

Also want that font to be in a different color, family and size instead off black. I also made some changes off the other text sizes and color. Perhaps an overal text css style in size and family

1 Like
2

If you’re referring to the small Send button (shown below), it looks different from our standard website buttons too—but we’re OK with that, since it signals that the user is interacting with an AI agent rather than using our site’s navigation:

image

If you’re referring to the larger Bubble Icon that appears as an overlay on your website, you can customize it by going to General Settings > Bubble Icon. There, you can choose from 34 built-in icons or upload your own using the Upload from Computer option. The upload supports vector formats like .svg and .ai, which I’d expect to display more reliably across devices.

If you don’t have image editing software, you can search online for square chat bubble icons in .svg or .ai format.

1 Like
3

Hi Paul no im not meaning the start button. If a conversation is stopt after a while there comes a button start new conversation. Thats a large rounded button. i want it to be not rounded but square corners.

1 Like
4

Hello @paintproductions!

Let me take this matter to our devs – they’ll be happy to do such a customisation for you. I’ll get back to you as soon as they’re done :raising_hands:

Stay tuned!

8

Hi there! Got a CSS code for you from our dev team:

[class*="interaction-ended__ActionButton-sc"] {
  border-radius: 0px !important;
  font-family: Arial !important;
  font-size: 20px !important;
  color: #fff !important;
}

The border-radius attribute makes the corners of the button squared. The font-family, font-size and color ones you can change to your liking – adjust the values after the : sign :raising_hands:

Let me know if it helped!

1 Like