Webchat quick reply customization

Hi All,

I am trying to customize the HTML of webchat. Currently the div bpw-keyboard-quick_reply is separated from the welcome message. I want to display is just below it. i.e. the div bpw-keyboard-quick_reply should come under the dive bpw-msg-list.

How do we change the HTML code of the web chat? Is there a sample guide to do this?

Thanks in advance.

Hi Ruchi,

Since they are in different containers, it is a little bit hard to achieve this by only using CSS, however, I was able to do something similar by using this code:

.bpw-msg-list {
    flex-grow: none !important;
    flex: none !important;
    webkit-box-flex: none !important;
    max-height: 82% !important;

.bpw-keyboard {
    flex-grow: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

.bpw-keyboard > div:last-child {
    display: none;

You could also do this by using custom components.

Thanks a lot @David_Vitora . It worked!

Hi David,
in the solution above, the heigh of .bpw-msg-list div remains constant even if the size of the div bpw-keyboard-quick_reply is small. Can we do anything about it?

Hi @ruchi
Would you mind sharing an image to illustrate the issue?

Hi @David_Vitora ,

Please see the below images

Would like to reduce the gap between bpw-msg-list and bpw-keyboard-quick_reply dynamically. For example like the image below. It’s from icici’s chatbot

Hi Ruchi, in that case, you can remove the scroll bar from the side using CSS.

you can also make the gap smaller by modifying “bpw-keyboard-quick_reply” with CSS using properties such as margin-top, padding-top, font-size, etc.