Chatbot close button color change

Ask the Community Customization
1

Hi everybody,

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

Thank you

2 Likes
3

Hi there, @laurent1 :waving_hand:

Sure, this code will help you:

.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 :slightly_smiling_face:

2 Likes
4

Thank you Max ! It woks perfectly !

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

Thank you

Laurent

2 Likes
5

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:

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

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

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

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

2 Likes
6

Thank you very much Max !

1 Like
7

Dear Max,

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

Thank you.

Laurent

2 Likes
8

Hi there, @laurent1 :waving_hand:

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 :slightly_smiling_face:

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();
});
2 Likes
9

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

1 Like
10

Hi there, @laurent1 :waving_hand:

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

.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 :slightly_smiling_face:

1 Like