# Rasa Web chat customizing buttons,colors alligning etc

**URL:** <https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716>\
**Category:** Rasa Open Source\
**Created:** [February 13, 2020, 5:39am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "2020-02-13T05:39:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rishier827](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/rishier827/32/6957_2.png) [@rishier827](https://forum.rasa.com/u/rishier827)\
**Post date:** [February 13, 2020, 5:39am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/1 "2020-02-13T05:39:04Z")

</div>

Hi is there any ways or documentation to customize rasa web chat like changing its color changing icons changing button stylings etc. chat starting button and closing button customizing. ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/c/cbbb08617b7002e0e78f9f62e0cb22e1c12ad6a5.png) and chage colors inside buttons.

 ![image.png](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/a/a799e6abf8bf20668d9907f8d900b55e087bd778.png)

---

<div class="post-metadata">

**Author:** ![rishier827](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/rishier827/32/6957_2.png) [@rishier827](https://forum.rasa.com/u/rishier827)\
**Post date:** [February 13, 2020, 5:52am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/2 "2020-02-13T05:52:42Z")

</div>

Instead of `<script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>` can i download it from github and customize it and for the `<script src=""></script>` can i use my local machine location where my **customized** code.🤔

---

<div class="post-metadata">

**Author:** ![JiteshGaikwad](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@JiteshGaikwad](https://forum.rasa.com/u/JiteshGaikwad)\
**Post date:** [February 14, 2020, 3:27am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/3 "2020-02-14T03:27:19Z")

</div>

Hey @rishier827, If you want customize the buttons, colors or other properties of the Rasa webchat, you try the below steps which worked for me:

I have written `style.css` to customize the css properties of the webchat, I have inspected the UI and have got the class names of the elements that I wanted to change.

Step1: Make sure you include the `webchat.js` before you import the `style.css` as shown below:

> ![socket_1](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/6/67c88d0d5d1178ccc5caaa4cb89b24b616fa3f0b.png)

Step2: updating the css properties in the `style.css` file:

> ![style](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/1/1117e4f7505a9b7e56bd2b5e8d1b58ad51e0724c.png)

Stpe3: Now you can check the UI:

 ![ui1](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/5/55f82c263de2323cb55179366baff1c0ed316804.png)

Let me know if this helps you. 🙂

---

<div class="post-metadata">

**Author:** ![rishier827](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/rishier827/32/6957_2.png) [@rishier827](https://forum.rasa.com/u/rishier827)\
**Post date:** [February 14, 2020, 5:08am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/4 "2020-02-14T05:08:17Z")

</div>

well ill try thankz

---

<div class="post-metadata">

**Author:** ![nicolas](https://avatars.discourse-cdn.com/v4/letter/n/67e7ee/32.png) [@nicolas](https://forum.rasa.com/u/nicolas)\
**Post date:** [March 5, 2020, 1:05am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/5 "2020-03-05T01:05:42Z")

</div>

Where in the code or github can I find ccs propities or class names what I want to change? for example .launcher

---

<div class="post-metadata">

**Author:** ![rishier827](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/rishier827/32/6957_2.png) [@rishier827](https://forum.rasa.com/u/rishier827)\
**Post date:** [March 11, 2020, 11:35am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/6 "2020-03-11T11:35:16Z")

</div>

![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/8/8dfd2fe113eb21eb4c1a6b374eff34ef0f97b58f.png)In the above hierachy i was unable to find button alliginig.

---

<div class="post-metadata">

**Author:** ![JiteshGaikwad](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@JiteshGaikwad](https://forum.rasa.com/u/JiteshGaikwad)\
**Post date:** [March 11, 2020, 12:08pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/7 "2020-03-11T12:08:49Z")

</div>

Hey @rishier827, what aligment you want to do, you meant to say you the css of how the buttons are placed?

---

<div class="post-metadata">

**Author:** ![rishier827](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/rishier827/32/6957_2.png) [@rishier827](https://forum.rasa.com/u/rishier827)\
**Post date:** [March 11, 2020, 12:15pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/8 "2020-03-11T12:15:31Z")

</div>

I want to have those buttons one after one on same size

---

<div class="post-metadata">

**Author:** ![JiteshGaikwad](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@JiteshGaikwad](https://forum.rasa.com/u/JiteshGaikwad)\
**Post date:** [March 11, 2020, 12:16pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/9 "2020-03-11T12:16:13Z")

</div>

do you mean vertical aligment?

---

<div class="post-metadata">

**Author:** ![rishier827](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/rishier827/32/6957_2.png) [@rishier827](https://forum.rasa.com/u/rishier827)\
**Post date:** [March 11, 2020, 12:19pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/10 "2020-03-11T12:19:27Z")

</div>

yep do you have any suggestion

---

<div class="post-metadata">

**Author:** ![JiteshGaikwad](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@JiteshGaikwad](https://forum.rasa.com/u/JiteshGaikwad)\
**Post date:** [March 11, 2020, 12:23pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/11 "2020-03-11T12:23:39Z")

</div>

Below is the CSS:

```auto
.conversation-container .replies {
display:block
}

```

it gives the below output, let me know if this helps you:

![Screenshot%20from%202020-03-11%2017-52-18](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/2/2588788b7b67445c67b96971acf5da5e03987a81.png)

---

<div class="post-metadata">

**Author:** ![rishier827](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/rishier827/32/6957_2.png) [@rishier827](https://forum.rasa.com/u/rishier827)\
**Post date:** [March 11, 2020, 12:26pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/12 "2020-03-11T12:26:04Z")

</div>

> [@JiteshGaikwad](#):
>
> .conversation-container .replies { display:block }

yep it worked

---

<div class="post-metadata">

**Author:** ![JiteshGaikwad](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@JiteshGaikwad](https://forum.rasa.com/u/JiteshGaikwad)\
**Post date:** [March 11, 2020, 12:26pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/13 "2020-03-11T12:26:44Z")

</div>

Great 😌

---

<div class="post-metadata">

**Author:** ![Swapratim](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/swapratim/32/7958_2.png) [@Swapratim](https://forum.rasa.com/u/Swapratim)\
**Post date:** [April 4, 2020, 5:22am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/14 "2020-04-04T05:22:19Z")

</div>

Thanks for the code. I applied the same but the style.css is not overwriting the default electric blue color mode.

---

<div class="post-metadata">

**Author:** ![JiteshGaikwad](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@JiteshGaikwad](https://forum.rasa.com/u/JiteshGaikwad)\
**Post date:** [April 4, 2020, 12:10pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/15 "2020-04-04T12:10:43Z")

</div>

Where did you added the style.css in your html file?

---

<div class="post-metadata">

**Author:** ![Swapratim](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/swapratim/32/7958_2.png) [@Swapratim](https://forum.rasa.com/u/Swapratim)\
**Post date:** [April 4, 2020, 3:07pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/16 "2020-04-04T15:07:23Z")

</div>

Created the style.css and add the stylesheet link in the head of html - didn’t worked. Then I added along with the webchat script - didn’t worked either. Like this:

 WebChat.default.init

---

<div class="post-metadata">

**Author:** ![Swapratim](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/swapratim/32/7958_2.png) [@Swapratim](https://forum.rasa.com/u/Swapratim)\
**Post date:** [April 12, 2020, 6:43am UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/17 "2020-04-12T06:43:28Z")

</div>

Hi @JiteshGaikwad ,

Below is the test HTML and style.css. But it is still not working.

HTML Code:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/e/e00cbfc0bd755a8e2582469c3fa1417c6bb08f0f.png)

style.css

.conversation-container .header { background-color: #F5360D; }

.conversation-container client { background-color: #F5360D; }

.conversation-container close-button { background-color: #F5360D; }

.launcher { background-color: #F5360D; }

Still, the default webchat color is been shown there. Please have a look at: [https://rasa-webchat-test.glitch.me/](https://rasa-webchat-test.glitch.me/)

Thanks in advance if you find some time to suggest a way around.

---

<div class="post-metadata">

**Author:** ![JiteshGaikwad](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@JiteshGaikwad](https://forum.rasa.com/u/JiteshGaikwad)\
**Post date:** [April 12, 2020, 1:48pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/18 "2020-04-12T13:48:07Z")

</div>

hey @Swapratim, the css classnames have been changed:

```auto
.rw-conversation-container .rw-header{
    background-color: #F5360D;
}

.rw-conversation-container .rw-client{
       background-color: #F5360D !important; 
}
.conversation-container close-button {
    background-color: #F5360D;
}

.rw-launcher{
    background-color: #F5360D;
}

```

Output:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/5/596ef8e2186751b67ad7cbd861a3552dd31129da.jpeg)

I hope that helps 🙂

---

<div class="post-metadata">

**Author:** ![Swapratim](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/swapratim/32/7958_2.png) [@Swapratim](https://forum.rasa.com/u/Swapratim)\
**Post date:** [April 12, 2020, 3:06pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/19 "2020-04-12T15:06:40Z")

</div>

Fantastic! Works like a charm!! Thank you so much Jitesh! 🙂

---

<div class="post-metadata">

**Author:** ![JiteshGaikwad](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@JiteshGaikwad](https://forum.rasa.com/u/JiteshGaikwad)\
**Post date:** [April 12, 2020, 6:49pm UTC](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716/20 "2020-04-12T18:49:20Z")

</div>

You’re welcome 😊, glad that it helped you.

[Next page](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716.md?page=2)