< 1 minute read

Assuming you already have a custom CSS file if not below are some pointers on some CSS classes I modified.

/* header*/
.bpw-header-container {
  background: url(images/header.png) no-repeat;
  background-size: 100% 100%;
}
.bpw-bot-avatar img,
.bpw-bot-avatar svg {
  background: none;
}
/* bot chat bubble*/
.bpw-chat-bubble:first-of-type {
  border-bottom-right-radius: none !important;
  border-bottom-left-radius: none !important;
}
.bpw-chat-bubble:last-of-type {
  border-bottom-right-radius: none !important;
  border-bottom-left-radius: none !important;
}
.bpw-chat-bubble {
  border-radius: 25px;
  border: 2px solid orangered;
}
/* user chat bubble*/
.bpw-from-user .bpw-chat-bubble {
  background-color: orangered;
  color: #ffffff;
}
/* keyboard quick reply*/
.bpw-button {
  border: 1px solid orangered;
}
.bpw-button:hover {
  background-color: orangered;
  color: #ffffff;
  font-weight: bold;
}

Copy your custom stylesheet to modules\channel-web\assets\infa-style.css (here infa-style.css is my custom stylesheet)

In Botpress v11.x provide details of the above stylesheet in modules\channel-web\src\views\lite\main.jsx file

In Botpress v12.x (latest at the time of writing this blog) provide details of the above stylesheet in modules\channel-web\src\views\lite\core\constants.tsx file

Additionally, you can enable bots information page , here you can include a cover picture, bot avatar, website, name, contact details and privacy policies.

Go to the Botpress Admin page, navigate to the config page next to the name of the bot and edit bot information in the more details and Pictures sections.

Then in your source code, enable setting showBotInfoPage & infoPage.enabled property to true in either of 2 mentioned files

  1. out\bp\data\global\config\channel-web.json file (Global setting for all bots)
  2. out\bp\data\bots\BOT_NAME\config\channel-web.json (Bot specific)

The bot information page is accessible by clicking on the information icon in the top right corner of the chat window.

Note: This is only specific to Botpress v11 & v12+


Simon

I am a Fullstack developer and Consultant with an experience of 9+ years in the industry. I mainly work on Java, React, Javascript, NodeJs, Elasticsearch and Botpress.

5 Comments

Thilini · December 2, 2019 at 12:23 pm

Date: July

In Botpress v12.x “(latest at the time of writing this blog) provide details of the above stylesheet in modules\channel-web\src\views\lite\core\constants.tsx file” I cannot find this file path. I’m using v12.2.3. Is there any other path to change the styles in chatbot?

TJ · January 9, 2021 at 3:25 pm

Hi Simon,

Great guide – thank you! I managed to use your guide to set the custom stylesheet with my amended css. Can you tell me if there’s a similar const available to set the font?

I managed to adapt the font.css (data>assets>modules>channel-web), but each time the server restarts I need to edit again. So i want to use a hook similar as for the stylesheet but don’t know if there’s something like: extraFont: ‘/assets/modules/channel-web/custom-font.css’ available.

Cheers – TJ

Mee · February 16, 2021 at 9:21 pm

is this feature now only available in the pro version? I can’t get it working

How to create a custom component in Botpress? – Abhishek Simon · August 6, 2019 at 2:59 pm

[…] Note: For custom css classes please refer here. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.