Rasa Web chat customizing buttons,colors alligning etc - Rasa Open Source - Rasa Community Forum

Feb 2020

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.

post by JiteshGaikwad on Feb 13, 2020

JiteshGaikwad Rasa Certified Developer

Feb 2020

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_1929×572 24.7 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/6/67c88d0d5d1178ccc5caaa4cb89b24b616fa3f0b.png "socket_1")

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

Stpe3: Now you can check the UI:

\ ui1421×551 14.7 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/5/55f82c263de2323cb55179366baff1c0ed316804.png "ui1")

Let me know if this helps you.

post by rishier827 on Feb 14, 2020

Feb 2020

well ill try thankz

19 days later

post by nicolas on Mar 4, 2020

nicolas nicolas farina

JiteshGaikwad](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

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

post by rishier827 on Mar 11, 2020

JiteshGaikwad](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

\ image1810×1048 58.7 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/8/8dfd2fe113eb21eb4c1a6b374eff34ef0f97b58f.png "image")

In the above hierachy i was unable to find button alliginig.

post by JiteshGaikwad on Mar 11, 2020

JiteshGaikwad Rasa Certified Developer

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

post by rishier827 on Mar 11, 2020

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

post by JiteshGaikwad on Mar 11, 2020

JiteshGaikwad Rasa Certified Developer

do you mean vertical aligment?

post by rishier827 on Mar 11, 2020

yep do you have any suggestion

post by JiteshGaikwad on Mar 11, 2020

JiteshGaikwad Rasa Certified Developer

Below is the CSS:


.conversation-container .replies {
display:block
}

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

post by rishier827 on Mar 11, 2020

yep it worked

post by JiteshGaikwad on Mar 11, 2020

JiteshGaikwad Rasa Certified Developer

Great

23 days later

post by Swapratim on Apr 4, 2020

JiteshGaikwad](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

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

post by JiteshGaikwad on Apr 4, 2020

JiteshGaikwad Rasa Certified Developer

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

post by Swapratim on Apr 4, 2020

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

post by Swapratim on Apr 12, 2020

Hi @JiteshGaikwad ,

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

HTML Code:

\ image1079×656 37.9 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/e/e00cbfc0bd755a8e2582469c3fa1417c6bb08f0f.png "image")

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/

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

post by JiteshGaikwad on Apr 12, 2020

JiteshGaikwad Rasa Certified Developer

hey @Swapratim, the css classnames have been changed:


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

\ image1358×704 141 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/5/596ef8e2186751b67ad7cbd861a3552dd31129da.jpeg "image")

I hope that helps

post by Swapratim on Apr 12, 2020

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

post by JiteshGaikwad on Apr 12, 2020

JiteshGaikwad Rasa Certified Developer

You’re welcome , glad that it helped you.

post by Navjan on Apr 15, 2020

Navjan Navod

JiteshGaikwad](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

@JiteshGaikwad this is really amazing. Can i use this with Angular ? I want to create front end using Angular js.

post by Navjan on Apr 15, 2020

Navjan Navod

JiteshGaikwad](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

@JiteshGaikwad Thank you for your great explanations. Please provide your opinion there Custom User Interface for Rasa chatbot

Thank you.

11 days later

post by rishier827 on Apr 26, 2020

Swapratim](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

HI its better if you add specific version

<script src="https://storage.googleapis.com/mrbot-cdn/webchat-v0.7.21.js"></script>

becuause in latest version ,


<script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>

.conversation-container .header is as → .rw-conversation-container .rw-header

\ image828×868 25.1 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/6/6d97b3c302ed4ebb5f418e89400800dcbe6419a2.png "image")

Here the link of documentation if you want to read more

So its better if you change webchat-latest.js into specified version or refactor your style.css with latest style format .rw-conversation-container .rw-header{ background-color: #F5360D; }

post by Swapratim on Apr 27, 2020

Thank you very much @rishier827 - much appreciated. I’m already using in that way too now.

20 days later

post by facureyes on May 18, 2020

facureyes

JiteshGaikwad](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

May 2020

Hi! Im trying to make something similar to this, but I want to align the text to the center of the button. Is this possible? Thanks!

post by facureyes on May 18, 2020

facureyes

May 2020

If anyone is having the same question I solved this just adding this to style.css:


.conversation-container .replies {
    display:inline-block;
}
.conversation-container .reply{
    display:block;
    text-align: center;
}

21 days later

post by devesh on Jun 9, 2020

devesh Devesh Garg

Hi, I want to change the font size in rasa webchat. How to do that? Also, can I change the overall size of the chat window? Thanks

post by rishier827 on Jun 9, 2020

TalkSick-code Tapan Sharma

In older versions


.conversation-container .message {
    margin: 10px;
    display: flex;
    font-size: 14px;
    font-family: Roboto,serif;
    flex-wrap: wrap;
}

in the css you can change font-size: 14px; to any size as you wish in latest versions

\ image860×886 55.7 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/9/9252db1fdb03dc7ad0d89c55e2493755ef3d45b7.png "image")

with latest version you have to use just check latest version


.rw-conversation-container .rw-message{
font-size: 14px;
}

13 days later

post by TalkSick-code on Jun 22, 2020

How can I add a different image to bot avatar in text replies and header? profileAvatar: “url” adds same image to both header and text replies.

Also, is there a way to add a userAvatar?

post by Swapratim on Jun 28, 2020

Hello,

I am back again with a new question about the chat widget (webchat-latest.js). Looking for a help in here. I am looking for a way to add a customized banner in the chat-widget, something like: ‘ Powered by Rasa’. Below is the screenshot which I’m trying to achieve.

Is there a way to update custom components to the chat-widget?

\ image456×642 88.3 KB](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/2X/8/8b6deeca86b79b6297a55d565109eeb01b5f9ff5.png "image")

9 days later

post by rakacendekia on Jul 8, 2020

Hey, i just want to know. How to add that profile picture ?

post by Swapratim on Jul 8, 2020

In the webchat script, add this parameter: profileAvatar:“ https://xxx/yyy/bot_icon.png” Use your customized avatar image.

post by rakacendekia on Jul 9, 2020

Thank you, that was very helpful, its worked. So the image used must be in the form of a link, is there another way if I want to use the image from the location of the hard drive?

post by Swapratim on Jul 9, 2020

Yes, of course you can keep the image locally (like in assets folder) and provide href location in the webchat.

post by Swapratim on Jul 9, 2020

Swapratim](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

Hello anyone there with some idea on how to put customized banner to webchat (description above)?

post by rakacendekia on Jul 12, 2020

Hi, does anyone know how to add the confirmation dialog (image below) so that its enters the chatroom

post by rakacendekia on Jul 15, 2020

Swapratim](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

how to set the opening dialog according to what we want ? because my bot is entering a dialog that I didn’t want at the beginning of use.

post by yckiong on Jul 22, 2020

yckiong

Abhi1994 Abhisek Panigrahi

Hi, want to know , is it possible to change rasa webchat bubble position to left side?

27 days later

post by InnoOmnia on Aug 18, 2020

InnoOmnia

rakacendekia](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

Aug 2020

Edit index.html file, look for “initPayload”, change greet to that intent you want to start

initPayload: “/greet”,

1 month later

post by salman01z on Sep 28, 2020

salman01z Salman

Sep 2020

Can I change size of the chat window ?

17 days later

post by nik202 on Oct 15, 2020

nik202 Enthusiast

rishier827](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

Oct 2020

Hi @rishier827 from where I can get the style.css file (complete file) any link? Many thanks in advance.

2 months later

post by Abhi1994 on Dec 16, 2020

JiteshGaikwad](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

Dec 2020

Hello When I am trying this nothing is happening please help

post by Abhi1994 on Dec 16, 2020

Abhi1994 Abhisek Panigrahi

nik202](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

Dec 2020

Hello This script link is not working for me . only working link is stated below : https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.min.js

post by Abhi1994 on Dec 16, 2020

Abhi1994 Abhisek Panigrahi

Swapratim](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

Dec 2020

Hello How did you change the css properties . It is not working for me Please help

24 days later

post by sid321axn on Jan 9, 2021

sid321axn Manu Siddhartha Rasa Certified Developer

Swapratim](https://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716 "Load parent post")

shiva_sankeerth Shiva Sankeerth Reddy, Yarradla Rasa Certified Developer

How to change bot Avatar image for text replies

8 days later

post by shiva_sankeerth on Jan 18, 2021

Hi @sid321axn,

you can change the avatar through webchat using this:


WebChat.default.init({
    selector: "#webchat",
    interval: 1000,
    inputTextFieldHint: "Type a message...",
    connectingText: "Waiting for server...",
    profileAvatar: **path to image**,
    initPayload: '/greet',
    customData: {"language": "en"},
    socketUrl: "http://localhost:5005",
    socketPath: "/socket.io/")}

Hope this is what you are looking for.

post by rajeshpolaki on Jan 21, 2021

rajeshpolaki

hyper links are not working after in\mplementing css

utter_new_landline_connection_online :

text: " To book online : [click] ( BSNL)"

post by rajeshpolaki on Jan 21, 2021

rajeshpolaki