Share classes of AI Chatbot elements

We currently provide color palette choices for our web-app, so the client can change the appearance of it.

If we just had a list of the css element names of the AI chat bot elements, we could extend our programmatic color palette swaps to our embedded chat bot too.

2 Likes

Hi there, @user16632 :waving_hand:

Most widget elements can be customized in the Customize Theme section on the Theme tab:


If you haven’t found a needed setting, please specify the elements you’d like to customize and I’ll gladly help :wink:

Yes Max, I know, but as I explained, in my app. we have a few palettes of colors that Users can choose from to change the look of their copy of our app. and we programatically apply their choice with a dynamic change of the CSS colors.
So making color changes in the AI Chat config, just sets a default, but doesn’t allow us to dynamically change the colors if the user chooses a different palette.
We would actually need to know what the CSS class names are for the AI Chat in order to do that.
We could, spend a deal of time using the browser devtools - inspect to track them down, but that’s a deal of work, and trial and error.

Not a biggie - we can do without it, but some users of Elfsight other products might also like the CSS classes too.

Don’t worry about it - get on with more important stuff. :blush:

1 Like

Ah, I see this now. Thanks for sharing the details of your use case!

Sure, I’ll be happy to provide you with the list of CSS classes for the AI Chatbot. I’ll share it here once it’s ready :wink:

Here is a list of classes of the chatbot elements. If I missed anything or any questions come up, please let me know. I’ll be happy to help :wink:

.es-window-container - chat window container

.es-window-header - header of the chat window

.es-avatar-container - avatar container

.es-avatar-background - avatar background

[class*="window-header__Title-sc"] - agent profile name

[class*="window-header__Caption-sc"] - agent profile caption

.es-header-button-new-chat - New Chat button

.es-header-button-transcript - Save Transcript button

.es-message-user - message of the user

.es-message-assistant - bot messages

.es-message-background - message background

.es-quick-reply-button - quick reply button

.es-form-field-shortText - Short Text field of the form

.es-form-field-email - Email field of the form

.es-form-field-phone - Phone field of the form

.es-choice-option-item-label - Consent field label

.es-button-base-container - container of the Submit button in the form

.es-button-base-ellipsis - text of the Submit button in the form

.es-window-footer - footer of the chat window

.es-window-footer-content - footer content of the chat window

.es-interaction-field-container - message input container

[class*="TextControlBase__TextControlBasePlaceholder-sc"] - message input placeholder

.es-interaction-field-submit-button - Send Message button

[class*="footer__FooterText-sc"] - footer text

.es-footer-action-restart-button - Start New Conversation button

1 Like