How to customize CSS or style of embedded bot?

Hi,

I’m using Botpress 11.5.1 and I’m trying to add a custom stylesheet in the init of the bot but it doesn’t work. Any reason why?

How do I change the complete look and feel of the bot? I have purchased the license but I can’t figure out what I have to modify

Thanks!

Did you make sure your stylesheet is available and that you provide correct url to it?

yes just making sure, the feature of a custom style sheet still exists right in botpress 11.5?

@thenilaymodi Just to share an update here, we’ve received the issue on the GitHub page and we’re planning to add this feature before friday !

Awesome thanks!

I’m just editing the source files directly

As basic as this is no luck yet. I test everything using the downloaded binaries because I want to ensure that future generations of Bot users get these functionalities and dont have to clone/fork on github and change source files.

The style customisation isn’t working. Its not about wrong links or wrong placement of css files. Its about something you can fix in five minutes. The extrastylesheet is simply loading before the default stylesheet and thus is overidden.

All this doesnt even need a pull request so please someone @ Botpress just make these changes and save the community from wasting the most precious commodity on earth, time.

How do we move forward and have an effective community when such a basic (very very very basic) problem is not addressed. I am literally close to tears here just check out the number of stylesheet related posts:

3 Likes

@DigiSenseiZim Its pretty easy to fork a version for you and rebuild the modules with the css modifications as you want. This is meant to be a framework. Its pretty straight-forward to read their code and add new features and customizations. Just do the following steps:

  • git clone git@github.com:botpress/botpress.git
  • Enter the botpress folder, run a yarn install
  • After installing the libraries you should enter each folder inside “modules” and run yarn install && yarn build
  • Make the modifications you want inside the modules views folder (modules/*/views/full/ or modules/*/views/full/)
  • Then, the modules you modified you need to run yarn install && yarn build again
  • Then with the modules built go to the root folder of the project (cd ../../) and run yarn build && yarn start

I think that’s it. Pardon me if I am missing something.

1 Like

All I am saying is this is definitely a feature we want out of the box from the binaries on botpress.io

Check out below 2 how-to guides for detailed explanation on adding custom stylesheet in embedded web chat.

How to use a custom css in Botpress?
Botpress: How to embed bot in your site?

@abhisheksimon I can’t find the modules\channel-web\src\views\lite\core\constants.tsx file that you mention in your blog. My module folder has .tgz files that I cannot go into.
image

@av_botpress the constants file is not necessary. To customize the CSS, the links provided by @abhisheksimon should work perfectly (the extraStylesheet is the way to go)

What do you mean by this? How can you access the extraStyleSheet without going into the constants file? Are you saying when you initialize the bot?
Edit: Fixed it. I kept putting extraStyleSheet with two capital S’s when there was only one. Stupid simple mistake.

1 Like

@abhisheksimon I’m using v12.2.3 and I couldn’t find stylesheet in modules\channel-web\src\views\lite\core\constants.tsx file. I need to change the default styles and are there any solutions?

Hi @Thilini, you can replace the whole stylesheet by replacing data/assets/modules/channel-web/default.css. But keep in mind that this file is overwritten with the default one when the server restarts, so it needs to be replaced each time.

Setting the extraStylesheet property allows you to replace any of the style, while keeping the base styling untouched for the elements you don’t want to change.

Thank you for your response. It works :+1: