< 1 minute read

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

custom css in botpress How to use a custom css in Botpress? stylesheet11x

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

custom css in botpress How to use a custom css in Botpress? stylesheet12x

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)
custom css in botpress How to use a custom css in Botpress? image 5

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

custom css in botpress How to use a custom css in Botpress? image 3

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.

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?

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 extraStylesheet parameter. 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. […]

Leave a Reply

Avatar placeholder

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.