Help Center
Welcome to the WalkMe Help Center

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

How to Change the ActionBot Custom Style (CSS)

Last Updated May 4, 2023

Brief Overview

The following how-to article explains how the ActionBot's appearance can be changed using CSS.

Before changing the CSS
 If you plan to add your own logo and bot icons, we recommend uploading them to the Asset Library first.

  1. Upload all files to the Asset Library
  2. Copy the ID
  3. Save the copied IDs somewhere so you can add them to the CSS later
Video Tutorial

Check out this video for a quick tutorial on ActionBot CSS.

ActionBot Styling Using CSS

To change the look and feel of the ActionBot,

  1. Go to the Editor
  2. Open ActionBot (All Items → ActionBot)
  3. Go the Bot
  4. Click Customize the Look and Feel of Your Bot
  5. Click Advanced Customizations to open the CSS Editor

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;

}

To change the user's message:

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

}

Removing the Shadow of the messages

To remove the shadow behind the message box add the following line in the statements:

  • .message .message-text
  • message .message-text-arrow::before
  • .message .message-text-arrow::after

CSS Example:

.message .message-text {

box-shadow:  0 0px 0px 0 rgba(0,0,0,0) !important;

}

.message .message-text-arrow::before {

box-shadow:  0 0px 0px 0 rgba(0,0,0,0) !important;

}

.message .message-text-arrow::after {

box-shadow:  0 0px 0px 0 rgba(0,0,0,0) !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;
}

Change ActionBot container position

This is done in the Editor's main CSS

Changing the width, height, and screen position of the ActionBot is done in the Editor's main CSS, not in the ActionBot editor.

To change the container position, go to the Editor's main CSS:

  1. Go to the Editor
  2. Click Customize
  3. Go the CSS tab

The selector for anything related to the Bot's container is: .wm-chatbot .wm-chatbot-container

So you can combine the CSS for the on-screen position and the height and width within the same selector. Absolute positioning defines the position of the bot's box from the toprightbottom and left side margins of the web page.

CSS Example:

.wm-chatbot .wm-chatbot-container {

height: 800px !important;
width: 800px !important;
position: absolute !important;
top: 200px !important;
left: 0px !important;

}

Was this article helpful?

Thanks for your feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×