# How to change the color of Rasa webchat

**URL:** <https://forum.rasa.com/t/how-to-change-the-color-of-rasa-webchat/48672>\
**Category:** Rasa Open Source\
**Created:** [October 22, 2021, 10:23am UTC](https://forum.rasa.com/t/how-to-change-the-color-of-rasa-webchat/48672 "2021-10-22T10:23:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![miner](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@miner](https://forum.rasa.com/u/miner)\
**Post date:** [October 22, 2021, 10:23am UTC](https://forum.rasa.com/t/how-to-change-the-color-of-rasa-webchat/48672/1 "2021-10-22T10:23:23Z")

</div>

Hi,

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

![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/d/7/d7a01e100dec090a9249a006c4ad46e4f7caf06f.png)

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

---

<div class="post-metadata">

**Author:** ![ChrisRahme](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/chrisrahme/32/15572_2.png) [@ChrisRahme](https://forum.rasa.com/u/ChrisRahme)\
**Post date:** [October 22, 2021, 10:36am UTC](https://forum.rasa.com/t/how-to-change-the-color-of-rasa-webchat/48672/2 "2021-10-22T10:36:39Z")

</div>

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](https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop) and refresh the page.

* * *

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

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/0/4/045de9a095501d1c8fe08be6924f0864b43dfcee.png)

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

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/c/b/cb13eb45fb5fc9ef3ff3970b63d7128973f65a45.png)

---

<div class="post-metadata">

**Author:** ![ChrisRahme](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/chrisrahme/32/15572_2.png) [@ChrisRahme](https://forum.rasa.com/u/ChrisRahme)\
**Post date:** [October 22, 2021, 10:43am UTC](https://forum.rasa.com/t/how-to-change-the-color-of-rasa-webchat/48672/3 "2021-10-22T10:43:28Z")

</div>

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

> <https://github.com/botfront/rasa-webchat/blob/master/src/components/Widget/components/Launcher/style.scss>

Specifically at line 36:

```css
.#{$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;

```

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [October 22, 2021, 11:22am UTC](https://forum.rasa.com/t/how-to-change-the-color-of-rasa-webchat/48672/4 "2021-10-22T11:22:38Z")

</div>

@miner Hello again! Its an easy lazy query 🙂 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](https://youtu.be/n4XTy8M7zlU)

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:

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

```

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

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