For Developers
Web Chat v1
Styling your Web Chat
Show Bot Info

Show Bot Info

Styling Webchat

You can Customize the Chatbot's Information Page using below CSS


To show bot information page, you will need to add showBotInfoPage : true in your webchat init object


 
/_ Styling for the bot summary section _/
.bpw-botinfo-summary {
margin-top: -32px; /_ Move the section up by 32px _/
border-bottom: solid 1px rgba(0, 0, 0, 0.1); /_ Add a 1px solid border to the bottom _/
box-shadow: 0px 4px 5px -5px var(--gray); /_ Add a box shadow effect _/
text-align: center; /_ Center align the text _/
}
 
/_ Styling for the bot avatar _/
.bpw-botinfo-summary .bpw-bot-avatar.default {
margin: 0 auto var(--spacing-medium); /_ Center the avatar image and add some margin at the bottom _/
}
 
/_ Styling for the bot information container _/
.bpw-botinfo-container {
margin: 0 auto; /_ Center the container _/
max-width: 800px; /_ Set a maximum width of 800px _/
width: 100%; /_ Set the width to 100% _/
text-align: center; /_ Center align the text _/
color: #1e1e1e; /_ Set the font color to a dark gray _/
overflow-y: auto; /_ Add a vertical scroll bar if the content overflows _/
height: 100%; /_ Set the height to 100% _/
}
 
/_ Styling for the bot cover picture wrapper _/
.bpw-botinfo-cover-picture-wrapper {
height: 50%; /_ Set the height to 50% _/
overflow: hidden; /_ Hide any content that overflows the container _/
}
 
/_ Styling for the bot cover picture _/
.bpw-botinfo-cover-picture {
width: 100%; /_ Set the width to 100% _/
object-fit: cover; /_ Scale the image to fit the container and maintain its aspect ratio _/
}
 
/_ Styling for buttons and links _/
.bpw-botinfo-container button,
.bpw-botinfo-container a {
font-size: 0.9em; /_ Set the font size to 0.9em _/
color: rgb(102, 102, 102); /_ Set the font color to a light gray _/
text-decoration: none; /_ Remove any text decoration _/
}
 
/_ Styling for the bot description section _/
.bpw-botinfo-description {
margin-top: 0.4em; /_ Add some margin at the top _/
margin-bottom: 1em; /_ Add some margin at the bottom _/
}
 
/_ Styling for the bot summary header _/
.bpw-botinfo-summary h3 {
margin: 0; /_ Remove any margin _/
}
 
/_ Styling for the bot links section _/
.bpw-botinfo-links {
border-bottom: solid 1px rgba(0, 0, 0, 0.1); /_ Add a 1px solid border to the bottom _/
}
 
/_ Styling for each bot link _/
.bpw-botinfo-link {
padding-left: 25%; /_ Add some padding to the left _/
display: flex; /_ Use flexbox to align the content _/
margin: 20px 0; /_ Add some margin at the top and bottom _/
}
 
/_ Styling for the bot link icon _/
.bpw-botinfo-link i {
margin-right: 10px; /_ Add some margin to the right _/
}
 
/_ Styling for the preferred language section _/
.bpw-botinfo-preferred-language {
margin: 20px 0; /_ Add some margin at the top and bottom _/
}
/_ This section defines the styling for the user's preferred language dropdown select box _/
.bpw-botinfo-preferred-language select {
/_ Adds 10 pixels of margin to the left of the select element _/
margin-left: 10px;
}
 
/_ This section defines the styling for the terms and conditions link _/
.bpw-botinfo-terms {
/_ Adds 0 pixels of padding to the top and bottom, and 20 pixels of padding to the left and right _/
padding: 0px 20px;
/_ Aligns the text to the left _/
text-align: left;
}
 
.bpw-botinfo-terms a {
/_ Makes the anchor element a block-level element that is inline with the rest of the text _/
display: inline-block;
/_ Sets the width of the anchor element to 100% _/
width: 100%;
/_ Sets the height of each line of text within the anchor element to 2.5 times the font size _/
line-height: 2.5;
/_ Adds a solid 1 pixel border to the bottom of the anchor element with a slightly transparent black color _/
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
 
/_ This section defines the styling for the start button _/
.bpw-botinfo-start-button {
/_ Sets the font of the element to inherit from the parent element _/
font: inherit;
/_ Sets the text color of the element to inherit from the parent element _/
color: inherit;
/_ Sets the background color of the element to be transparent _/
background-color: transparent;
/_ Changes the mouse cursor to a pointer when hovering over the element _/
cursor: pointer;
/_ Adds a 20 pixel border radius to the corners of the element _/
border-radius: 20px;
/_ Sets the height of each line of text within the element to 24 pixels _/
line-height: 24px;
/_ Adds 5 pixels of padding to the top and bottom, and 10 pixels of padding to the left and right of the element _/
padding: 5px 10px;
/_ Adds 25 pixels of margin to the top of the element _/
margin-top: 25px;
/_ Adds a solid 1 pixel border to the element with a gray color _/
border: 1px solid rgb(100, 100, 100);
}
 
/_ This section defines the styling for the start button when it has focus _/
.bpw-botinfo-start-button:focus {
/_ Changes the border color of the element to black when it has focus _/
border: 1px solid black;
/_ Changes the text color of the element to black when it has focus _/
color: black;
}