Botpress Cloud: Webchat Customization

Chatbot Button

Styling Webchat

You can Customize the Chatbot Button using below CSS


This class styles the floating button element

1
.bpw-floating-button {
2
/* Aligns the button to the right side of the container */
3
float: right;
4
/* Sets the fill color of the button icon */
5
fill: rgb(255, 255, 255);
6
/* Changes the cursor to a pointer when hovering over the button */
7
cursor: pointer;
8
/* Removes the outline around the button when clicked */
9
outline: none;
10
11
/* Centers the icon inside the button element */
12
display: flex;
13
align-items: center;
14
justify-content: center;
15
16
/* Sets the z-index to ensure the button is on top of other elements */
17
z-index: 1;
18
/* Sets the width and height of the button */
19
width: 52px;
20
height: 52px;
21
/* Changes the cursor to a pointer when hovering over the button */
22
cursor: pointer;
23
/* Rounds the corners of the button */
24
border-radius: 50%;
25
/* Adds a shadow effect to the button */
26
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
27
/* Clips any content that overflows the button */
28
overflow: hidden;
29
30
/* Removes padding and borders from the button */
31
padding: 0;
32
border: none;
33
background-clip: padding-box;
34
35
/* Adds a transition effect to the button when its size changes */
36
transition: width 1s, height 1s;
37
}

To add your own Icon as Chatbot Button, use this code

1
.bpw-floating-button {
2
background-image: url(YOUR_URL);
3
}

This class styles the icon inside the floating button

1
.bpw-floating-button i {
2
/* Adds a transition effect to the icon when its opacity changes */
3
transition: opacity 0.3s ease;
4
/* Sets the opacity of the icon to fully visible */
5
opacity: 1;
6
/* Inherit the fill and stroke color from the parent button element */
7
fill: inherit;
8
stroke: inherit;
9
/* Sets the width of the icon to 100% of the parent button element */
10
width: 100%;
11
/* Removes padding and sets line-height to 0 to center the icon */
12
padding: 0;
13
line-height: 0;
14
}

This class styles the notification badge on the floating button

1
.bpw-floating-button .bpw-floating-button-unread {
2
/* Displays the notification badge */
3
display: block;
4
/* Positions the badge to the top right of the button */
5
position: absolute;
6
right: 2px;
7
bottom: 54px;
8
/* Sets the width and height of the badge */
9
width: 20px;
10
height: 20px;
11
/* Rounds the corners of the badge to make it circular */
12
border-radius: 50%;
13
/* Centers the text inside the badge */
14
line-height: 20px;
15
16
/* Sets the color of the text inside the badge */
17
color: #fff;
18
/* Sets the background color of the badge */
19
background-color: #ff5d5d;
20
/* Adds a shadow effect to the badge */
21
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
22
}