# AI Chatbot Conversation button not rounded button

**URL:** <https://community.elfsight.com/t/ai-chatbot-conversation-button-not-rounded-button/135897>\
**Category:** Customization\
**Tags:** ai-chatbot\
**Created:** [August 8, 2025, 9:27am UTC](https://community.elfsight.com/t/ai-chatbot-conversation-button-not-rounded-button/135897 "2025-08-08T09:27:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![paintproductions](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paintproductions/32/3231_2.png) [@paintproductions](https://community.elfsight.com/u/paintproductions)\
**Post date:** [August 8, 2025, 9:27am UTC](https://community.elfsight.com/t/ai-chatbot-conversation-button-not-rounded-button/135897/1 "2025-08-08T09:27:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Paul\_D](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paul_d/32/71908_2.png) [@Paul\_D](https://community.elfsight.com/u/Paul_D)\
**Post date:** [August 8, 2025, 12:55pm UTC](https://community.elfsight.com/t/ai-chatbot-conversation-button-not-rounded-button/135897/2 "2025-08-08T12:55:53Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/7/77a764184f76ae2a3319f91b97f2d9577d9ec762.png)

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.

---

<div class="post-metadata">

**Author:** ![paintproductions](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paintproductions/32/3231_2.png) [@paintproductions](https://community.elfsight.com/u/paintproductions)\
**Post date:** [August 8, 2025, 2:45pm UTC](https://community.elfsight.com/t/ai-chatbot-conversation-button-not-rounded-button/135897/3 "2025-08-08T14:45:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Irene](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/irene/32/35338_2.png) [@Irene](https://community.elfsight.com/u/Irene)\
**Post date:** [August 11, 2025, 3:12pm UTC](https://community.elfsight.com/t/ai-chatbot-conversation-button-not-rounded-button/135897/4 "2025-08-11T15:12:12Z")

</div>

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 🙌

Stay tuned!

---

<div class="post-metadata">

**Author:** ![Irene](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/irene/32/35338_2.png) [@Irene](https://community.elfsight.com/u/Irene)\
**Post date:** [August 12, 2025, 6:43am UTC](https://community.elfsight.com/t/ai-chatbot-conversation-button-not-rounded-button/135897/8 "2025-08-12T06:43:39Z")

</div>

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

```auto
[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 🙌

Let me know if it helped!