Rasa Web chat customizing buttons,colors alligning etc

Rasa Open Source
21

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

1 Like
22

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

Thank you.

23

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

image
image828×868 25.1 KB
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; }

2 Likes
24

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

25

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!

26

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;
}
27

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

28

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

image
image860×886 55.7 KB

with latest version you have to use just check latest version

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

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?

30

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?

image
image456×642 88.3 KB

31

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

32

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

1 Like
33

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?

34

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

35

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

36

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

37

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.

38

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

39

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

initPayload: “/greet”,

40

Can I change size of the chat window ?