How to Change the ActionBot Custom Style (CSS)

Updated on January 11, 2021 Download PDFDownload as PDF
Download 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;

}

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;
}

 

Was this article helpful?

Related Articles

< Back