Botpress Cloud: Webchat Customization
Chatbot Button

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 */3float: right;4/* Sets the fill color of the button icon */5fill: rgb(255, 255, 255);6/* Changes the cursor to a pointer when hovering over the button */7cursor: pointer;8/* Removes the outline around the button when clicked */9outline: none;1011/* Centers the icon inside the button element */12display: flex;13align-items: center;14justify-content: center;1516/* Sets the z-index to ensure the button is on top of other elements */17z-index: 1;18/* Sets the width and height of the button */19width: 52px;20height: 52px;21/* Changes the cursor to a pointer when hovering over the button */22cursor: pointer;23/* Rounds the corners of the button */24border-radius: 50%;25/* Adds a shadow effect to the button */26box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);27/* Clips any content that overflows the button */28overflow: hidden;2930/* Removes padding and borders from the button */31padding: 0;32border: none;33background-clip: padding-box;3435/* Adds a transition effect to the button when its size changes */36transition: width 1s, height 1s;37}
To add your own Icon as Chatbot Button, use this code
1.bpw-floating-button {2background-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 */3transition: opacity 0.3s ease;4/* Sets the opacity of the icon to fully visible */5opacity: 1;6/* Inherit the fill and stroke color from the parent button element */7fill: inherit;8stroke: inherit;9/* Sets the width of the icon to 100% of the parent button element */10width: 100%;11/* Removes padding and sets line-height to 0 to center the icon */12padding: 0;13line-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 */3display: block;4/* Positions the badge to the top right of the button */5position: absolute;6right: 2px;7bottom: 54px;8/* Sets the width and height of the badge */9width: 20px;10height: 20px;11/* Rounds the corners of the badge to make it circular */12border-radius: 50%;13/* Centers the text inside the badge */14line-height: 20px;1516/* Sets the color of the text inside the badge */17color: #fff;18/* Sets the background color of the badge */19background-color: #ff5d5d;20/* Adds a shadow effect to the badge */21box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);22}