1. Home
  2. Build with the Editor
  3. ActionBot Automation
  4. How to Change the ActionBot Custom Style (CSS)

How to Change the ActionBot Custom Style (CSS)

Updated on January 24, 2019
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

CSS Example:

.input-send .message-btn {
background-color: red !important;
}
.input-send .message-btn:disabled {
background-color: red !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...);

}
.message-bot-icon-error {

background-image: url(https://.....image...);

}

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

CSS Example:

.chat-wrapper .chat-btn-over {

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;

}

Was this article helpful?

Related Articles