Let us see how to use custom CSS in Botpress to customise the look and feel of Botpress webchat. 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
- out\bp\data\global\config\channel-web.json file (Global setting for all bots)
- 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+
8 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?
Abhishek Simon · December 4, 2019 at 9:00 pm
@Thilini: Please use Botpress source from the below link, you will find the above mentioned path (just verified on v12.2.3)
Botpress source: https://github.com/botpress/botpress
If you want to use your custom CSS in Botpress binary then please check out the below guide.
https://abhisheksimon.wordpress.com/2019/07/31/botpress-embed-bot-in-your-site/
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
Dhruv · October 28, 2021 at 2:40 pm
How to make custom css for multiple bots, I want different css for different bots.
Simon · December 13, 2021 at 2:51 pm
When you embed your bot in any website you will have an option to provide any custom CSS to that particular bot. A code snippet is provided from this link.
window.botpressWebChat.init({
host: 'https://host:port',
botId: 'botid',
extraStylesheet: 'https://host:port/assets/modules/channel-web/custom-style.css'
});
Simon · January 23, 2022 at 1:42 pm
When you integrate your bot to a website, you have an option to provide a custom CSS file. Check this tutorial, it has an embed snippet where you can provide a URL for your custom stylesheet as a value to
extraStylesheetparameter. This can be different stylesheets based on your bots/website.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. […]