# Chatbot close button color change

**URL:** <https://community.elfsight.com/t/chatbot-close-button-color-change/140663>\
**Category:** Customization\
**Tags:** ai-chatbot\
**Created:** [October 16, 2025, 5:23pm UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663 "2025-10-16T17:23:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![laurent1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/laurent1/32/55270_2.png) [@laurent1](https://community.elfsight.com/u/laurent1)\
**Post date:** [October 16, 2025, 5:23pm UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/1 "2025-10-16T17:23:44Z")

</div>

Hi everybody,

do you know how to change the color of the button Close (X) of the chatbot ?

Thank you

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 16, 2025, 6:06pm UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/3 "2025-10-16T18:06:35Z")

</div>

Hi there, @laurent1 👋

Sure, this code will help you:

```auto
.es-header-button-close {
  color: red;
}

```

  

Please add it to the Custom CSS field on the General tab of your widget’s settings and you’ll be fine 🙂

---

<div class="post-metadata">

**Author:** ![laurent1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/laurent1/32/55270_2.png) [@laurent1](https://community.elfsight.com/u/laurent1)\
**Post date:** [October 17, 2025, 5:48am UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/4 "2025-10-17T05:48:22Z")

</div>

Thank you Max ! It woks perfectly !

Do you know how to change with one single class the color of all buttons ?

Thank you

Laurent

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 17, 2025, 10:31am UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/5 "2025-10-17T10:31:13Z")

</div>

All buttons have different classes, that’s why it’s impossible to target all of them using one class. To change the color of Send Message button, please use this CSS code:

```auto
.es-interaction-field-submit-button {
  background-color: green;
}

```

  

And this code will help you change the color of the Expand button:

```auto
.es-header-button-size {
  color: red;
}

```

  

If you need codes for more widget elements, please let me know. I’ll be happy to help 😉

---

<div class="post-metadata">

**Author:** ![laurent1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/laurent1/32/55270_2.png) [@laurent1](https://community.elfsight.com/u/laurent1)\
**Post date:** [October 19, 2025, 8:25am UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/6 "2025-10-19T08:25:06Z")

</div>

Thank you very much Max !

---

<div class="post-metadata">

**Author:** ![laurent1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/laurent1/32/55270_2.png) [@laurent1](https://community.elfsight.com/u/laurent1)\
**Post date:** [October 19, 2025, 8:49am UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/7 "2025-10-19T08:49:05Z")

</div>

Dear Max,

do you know how to open directly the chabot without clicking on the button container?

Thank you.

Laurent

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 20, 2025, 11:19am UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/8 "2025-10-20T11:19:28Z")

</div>

Hi there, @laurent1 👋

Sure, please add this script to the Custom JS field on the General tab of your widget’s settings and let me know if it helped 🙂

```auto
function waitForElement(selector, root = document) {
    return new Promise((res) => {
        let i = 10;

        function check() {
            const component = root.querySelector(selector);

            if (component) {
                res(component);
            } else if (i !== 50) {
                setTimeout(check, 100);
                i++;
            }
        }

        check();
    });
}

waitForElement("[class*='eapps-ai-chatbot'] button").then((bubble) => {
    const portal = bubble.parentNode.parentNode;
    
    const openChat = () => {
        const window = portal.querySelector("[class*='window-transition__Container-sc']");
        if (!window) {
            bubble?.click();
        }
    };
    
    openChat();
});

```

---

<div class="post-metadata">

**Author:** ![laurent1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/laurent1/32/55270_2.png) [@laurent1](https://community.elfsight.com/u/laurent1)\
**Post date:** [October 27, 2025, 7:09pm UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/9 "2025-10-27T19:09:49Z")

</div>

Dear Max,

thank you for youy help. It does not work every time. I will check, may be a probleme with my WIX parameters.

Do you know how to put the input field on top of the screen and get the chatbot answers below the input field ?

Thank you once again for your support.

Laurent

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 28, 2025, 11:33am UTC](https://community.elfsight.com/t/chatbot-close-button-color-change/140663/10 "2025-10-28T11:33:12Z")

</div>

Hi there, @laurent1 👋

You can display the input field at the top using this CSS code on the General tab of your widget’s settings:

```auto
.es-window-header {
  order: 1;
}

.es-window-footer {
  order: 2;
}

.es-window-body {
  order: 3;
}

```

  

As for the script opening the chat window, could you please send me a link to the page, where your widget is installed? I’ll be happy to check it for you 🙂