[Styler] Include "Chat Bot Info" CSS in the Styler
# 👀feature-requests
h
I think that will be useful to add the CSS which customizes "Chat Bot Info" section in the styler. https://botpress.com/docs/cloud/webchat-customization/bot-information/
f
Thanks for submitting this!
We are currently revamping the webchat experience. So all feedback and requests are extremely useful!
@plain-lifeguard-16679 @bright-magazine-792 for visibility
b
Copy code
/** BOT INFORMATION PAGE - START */

.bpw-botinfo-container {
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
  text-align: center;
  color: #1e1e1e;
  overflow-y: auto;
  height: 100%;
}

.bpw-botinfo-cover-picture-wrapper {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
}

.bpw-botinfo-cover-picture {
  width: 100%;
  object-fit: cover;
}

.bpw-botinfo-container button,
.bpw-botinfo-container a {
  font-size: 0.9em;
  color: rgb(102, 102, 102);
  text-decoration: none;
}

.bpw-botinfo-summary {
  margin-top: -32px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4px 5px -5px #ccc;
}

.bpw-botinfo-description {
  margin-top: 0.4em;
  margin-bottom: 1em;
}

.bpw-botinfo-summary h3 {
  margin: 0;
}

.bpw-botinfo-links {
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.bpw-botinfo-link {
  padding-left: 25%;
  display: flex;
  margin: 20px 0;
}

.bpw-botinfo-link i {
  margin-right: 10px;
}

.bpw-botinfo-preferred-language {
  margin: 20px 0;
}

.bpw-botinfo-preferred-language select {
  margin-left: 10px;
}

.bpw-botinfo-terms {
  padding: 0px 20px;
  text-align: left;
}

.bpw-botinfo-terms a {
  display: inline-block;
  width: 100%;
  line-height: 2.5;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.bpw-botinfo-start-button {
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  border-radius: 20px;
  line-height: 24px;
  padding: 5px 10px;
  margin-top: 25px;
  border: 1px solid rgb(100, 100, 100);
}

.bpw-botinfo-start-button:focus {
  border: 1px solid black;
  color: black;
}

/** BOT INFORMATION PAGE - END */
Here's everything you can do with styling your bot info page paste this to the advanced editor (make sure you have bot info ON from Botpress Cloud Dashboard) and run the code. You can tweak the colors and font stuff. Let me know if you're looking for something specific
h
I mean instead of copy and pasting this code, to be in the editor the Simple one and the Advanced one
And also your solution is valid when css is made from advanced styler, if it’s done from the simple one you have to copy your prev css, past in the editor, again to copy this for the bot info and again to paste it, after that to start styling
It’s for the UX
i
Is there really no way to specify an image for botinfo-cover-picture? Does it only default to bot-avatar img?
7 Views