Overwrite CSS Styling on Inject (Inject.css)

How can I overwrite the inject.css file found in data/assets/modules/channel-web/. I want to change the .bp-widget-slide class but it seems to reset every time a new botpress is started. I’ve included that class in my extraStylesheet and set the parameters I wanted to change to !important but it still doesn’t seem to work.

Hey @av_botpress !

I tried the instructions to customize the Web Chat style here and there are mistakes in the documentation. Sorry about that (a fix is in the pipe).

Make sure to do the following:

  1. Put your custom CSS file (e.g. chat.css) inside the <botpress_dir>/data/assets/modules/channel-web/ folder.
  2. Fix the extraStylesheet parameter in the 1_create_shortlink.js example:
...
extraStylesheet: '/assets/modules/channel-web/chat.css'
...
  1. Restart your Botpress server
  2. Head over to $EXTERNAL_URL/s/$BOT_NAME (e.g. http://localhost:3000/s/mybot)

Your chat.css stylesheet should now be downloaded by your browser.

Hope this helps!

This does work, however, it only works on the link http://localhost:3000/s/mybot. On my website I have a button that opens a new window for the bot, however, I end up with blank space due to the iframe width restriction. I want the bot to open up in full screen instead of in a 360px width, that’s why I need to override the bp-widget-slide class.

How can I make this work for the bot that is hosted on my website? Nothing seemed to change there.

@spgin sir I tried with the step. but I couldn’t get the expected output. Can you explain it step by step?
do I need to delete 00_create_shortlink.js (exist one )? I change the style sheet and after running bp, It gives me the default styles. How to solve this issue?

@Thilini You can find step-by-step instructions here: https://botpress.io/docs/channels/web#customizing-web-chat-style

Let me know if the instructions are not clear.

Thank you for your response sir. Still the styles changes as default. :neutral_face:
First I create chat.css in the mentioned folder. Then I changed 01_create_shortlink.js (just copy the code in document ) file in <botpress_dir>/data/global/hooks/after_bot_mount/ buildin folder. Isn’t the correct way?

sir , I have followed the instruction and build it. But unfortunately, the changes applied to the open chat window and I want to change the styles in embedded chat on the website.
Can you give me the solution for it

The html page that hosts the bot should look like this:

            window.botpressWebChat.init({ 
              host: 'http://10.123.456.789:3000', 
              botId: 'name-of-bot',
              extraStylesheet: 'assets/modules/channel-web/name_of_stylesheet.css' 
            });

            window.addEventListener('message', function(event) {
              if (event.data && event.data.name === 'webchatLoaded') {
                window.botpressWebChat.mergeConfig({
                  containerWidth: '100%',
                  layoutWidth: '100%'
                });
                window.botpressWebChat.sendEvent({ type: 'show'});
              }
            })

This should open up the bot on your website when a user enters. Does this solve your issue?

Thank you for your response.

window.botpressWebChat.init({ host: ‘<>’, botId: ‘<>’, extraStylesheet: ‘/assets/modules/channel-web/chat.css’ })

Adding this tag solved the issue.

1 Like

is this feature now only available in the pro version?

@PierreSnell can you help please?

Hi @MeeVony, what help do you need more ? Have you tried all the steps and explanations above ?

If yes and you still have troubles can you define which step you’re stuck on ?

@PierreSnell , the trouble is that I can’t customize my css style. And I have this in my log:


So what I want to know is can’t I customize my theme if I don’t have botpress pro?

Hi @MeeVony,

If you want to customize only the webchat then you can do it with the community edition by modifying the custom css.

But if you want to modify the botpress UI (admin/studio etc…) look then you need to be Pro. Check here

@PierreSnell thanks for your answer. So maybe there is something I did wrong in my customization.

Hey,

if you want to customize the css for the web chat, you have to create a new css file (you can copy the entries from the default one and change it). Make shure that you save the new file accessable from the web (e.g. in the same directory where the default one is). then you have to customize your part where you embedd the bot in the website and add a line “extraStyleshee” where you specify the path of your custom css file.

image