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