Aktualisiert am September 19, 2021
Download as PDF
Download as PDF
Brief Overview
The following how-to article explains how the ActionBot’s appearance can be changed using CSS.
Options for ActionBot Styling Using CSS
Changing the chat dialog box header color
CSS Selector: .chat-wrapper .chat-header
CSS Example:
.chat-wrapper .chat-header {
background: red !important;
border: red !important;
}
Changing the dialog message text color
CSS Selector: .message .message-text
CSS Example:
.message .message-text {
color: red !important;
}
Changing the message bubble background color
CSS Selectors:
- .message .message-text
- .message .message-text-arrow::before
- .message .message-text-arrow::after
- .message.user-message .message-text
- .message.user-message .message-text-arrow::before
- .message.user-message .message-text-arrow::after
CSS Example:
.message .message-text {
background: red !important;
}
.message .message-text-arrow::before {
background: red !important;
}
.message .message-text-arrow::after {
background: red !important;
}
.message.user-message .message-text {
background: red !important;
}
.message.user-message .message-text-arrow::before {
background: red !important;
}
.message.user-message .message-text-arrow::after {
background: red !important;
}
Changing the error message text color
CSS Selector: .message .message-text-error
CSS Example:
.message .message-text-error {
color: red !important;
}
Changing the header logo
CSS Selector: .chat-wrapper .chat-header .chat-logo
CSS Example:
.chat-wrapper .chat-header .chat-logo {
background: url(https://.....image...) no-repeat center center !important;
background-size: 82px !important;
width: 82px !important
}
Changing the SEND button color
CSS Selectors:
- .input-send .message-btn
- .input-send .message-btn:disabled
- .input-send .message-btn:hover
CSS Example:
.input-send .message-btn {
background-color: red !important;
}
.input-send .message-btn:disabled {
background-color: red !important;
}
.input-send .message-btn:hover {
background-color: orange !important;
}
Changing the ActionBot Bot icon
CSS Selectors:
- .message-bot-icon
- .message-bot-icon-error
CSS Example:
.message-bot-icon {
background-image: url(https://.....image...)!important;
}
.message-bot-icon-error {
background-image: url(https://.....image...)!important;
}
Changing the „remove message“ icon color
CSS Selectors:
- .message.can-be-removed .chat-message-remove
- .message.can-be-removed .chat-message-remove:hover
CSS Example:
.message.can-be-removed .chat-message-remove {
background-color: red !important;
color: red !important;
}
.message.can-be-removed .chat-message-remove:hover {
background-color: red !important;
color: red !important;
}
Changing the „start over“ icon color
CSS Selectors:
- .chat-wrapper .chat-btn-over
- .chat-wrapper .chat-btn-over:hover
CSS Example:
.chat-wrapper .chat-btn-over {
background-color: orange !important;
color: black !important;
}
.chat-wrapper .chat-btn-over {
background-color: orange !important;
color: black !important;
}
Changing the „open live chat“ icon color
CSS Selectors:
- .chat-wrapper .chat-btn-live-chat
- .chat-wrapper .chat-btn-live-chat:hover
CSS Example:
.chat-wrapper .chat-btn-live-chat {
background-color: orange !important;
color: black !important;
}
.chat-wrapper .chat-btn-live-chat:hover {
background-color: green !important;
color: black !important;
}
Changing all upper action buttons color
CSS Selectors: .chat-wrapper .chat-action-btn
CSS Example:
.chat-wrapper .chat-action-btn {
background-color: orange!important;
color: black !important;
}
Changing the scroll down button color
CSS Selectors: .chat-wrapper .chat-scroll-button-inner
CSS Example:
.chat-wrapper .chat-scroll-button-inner {
background-color: red !important;
}
Changing background color
CSS Selectors: .chat-wrapper .chat-body
CSS Example:
.chat-wrapper .chat-body {
background-color: purple !important;
}
Changing Live Chat suggestion color
CSS Selectors: .chat-wrapper .live-chat-suggestion
CSS Example:
.chat-wrapper .live-chat-suggestion {
background-color: orange !important
color: black !important
}
Changing Live Chat icon color
CSS Selectors: .chat-wrapper .chat-action-btn .chat-action-btn-icon
CSS Example:
.chat-wrapper .chat-action-btn .chat-action-btn-icon {
fill: red !important;
}
