How to change the color of Rasa webchat

Rasa Open Source
1

Hi,

I am looking for a color option for rasa_webchat (GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront). As you can see the highlight color of rasa_webchat is blue as depicted below:

image

Is there any option to change the color? Any help would be much appreciated. Thanks!

2

Hello!

Assuming you use Chrome or a Chromium-based browser (e.g. Brave):

Using “Inspect Element” in your browser, look at the CSS class of that button: right-click the button, choose “Inspect”, and the CSS panel will be opened on the right.

If this button has multiple CSS classes (you can see them on the HTML on the left), look for one which has a color/background/background-color property.

Once found, double click the CSS to edit the color. If it changed, that’s the correct class.

Then, using VSCode (or other editor), search for that class in all files and replace the color.

On your browser, clear the cache and refresh the page.

For example, testing it on the below blue “Reply” button:

image
image1913Ă—439 59.8 KB

What needs to be changed here is background: var(--tertiary). I modified it to background: #FF0000 and now it is red:

image
image1002Ă—148 7.15 KB

3

Or, this may be the file you want to modify:

Specifically at line 36:

.#{$namespace}launcher {
  @include animation(0, 0.5s, slide-in);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $tertiary; /* This one */
  border: 0;
  border-radius: 50%;
  box-shadow: 0px 2px 10px 1px $grey-3;
  height: 60px;
  margin: 0;
  width: 60px;
  box-sizing: border-box;
4

@miner Hello again! Its an easy lazy query :slight_smile: For customising the rasa webchat please follow this video tutorial and you will not able to change the colour, but even you can customise other things too : Best Ways To Customize Rasa-webchat - YouTube

OR

If you want to change the colour of launcher button with only single code, you can update in botfront snippet code while adding this:

userBackgroundColor: "#5a17ee;",
userTextColor: "white",
mainColor: " #5a17ee",

Note: This will code will change the complete widget color.

I hope this will solve your query :slight_smile: and If you having any issue do let me know please. Good luck!

1 Like