Currently I've embed my chatbot in a localhost website, I would like to apply custom CSS styling to it. Doing the styling in the website's CSS file does not make any changes to the bot, is there a solution for this?

Hi @elegant-vr-89667, when you initialize the bot, are you specifying the CSS in the

stylesheet

parameter? Like:

// Initialize the web chat with default options
<script>
  window.botpressWebChat.init({
      "botId": "539dd4de-aaa1-4a46-9218-95f32b2a1e3f",
      "hostUrl": "https://cdn.botpress.dev/webchat/v0",
      "messagingUrl": "https://messaging.botpress.dev",
      "clientId": "539de4de-aea1-4a46-9218-95f32b2a1e3f",
      "botName": "Wonderful-chatbot",
      "stylesheet":"./mystyle.css" //<--This one here
  });
</script>

i did referred to the CSS elements provided here

what does your CSS file look like right now?

for example in line 204, changing the font size of the chatbot header doesnt make a difference Edit: I just copy and paste the css codes for bot header from botpress docs, only changing the font-size value, to test if there is any effect

The docs doesn't have anything for `.bpw-header-name`; it does have something for

.bpw-header-title

. If you change "name" to "title," does that have an effect?

It does have, heres the link https://botpress.com/docs/cloud/webchat-customization/header/#:~:text=37-,.bpw%2Dheader%2Dname%20%7B,-38 changing it to "title" doesnt affect the result

Yep, just tested in in Chrome and

.bpw-header-name

is the right rule. How are you embedding your bot into the page?

inside shopPage.php, from line 212 to 226

in

window.botpressWebChat.init

on line 214, try adding the parameter

stylesheet:ShopPage.css

the parameter doesnt help

🤨 hmmm I'm not sure what might be preventing the CSS from making changes. Maybe @acceptable-gold-88171 could get his eyes on this?

alright, thank you for your help

Hi @elegant-vr-89667 , The style sheet is not hosted somehwere, currently it is on your machine/laptop, so it is not accessible by Botpress.

thank you for explaining, Bassam.

Give it a try and keep me posted 🙂

sorry to inform that I'm not planning to have my website hosted outside 😅 but still thanks a lot for solving my doubts

Anytime! There are a lot of free hosting websites, __personal__ recommendation would be: https://tiiny.host/host-html-file/

@elegant-vr-89667 if you think it could be helpful, you can ask for a feature making it easy to host a css file in#1111026806254993459 🙂

hello, I've attempted to give a CSS that is hosted by a server, but the bot still is not affected by the styles made

I'm not sure if ftp will work. Can you see the link in the network tab when you load the bot? I just tried your bot and got this error. Can you try hosting it on https?

I agree, ftp will not work

do you mean the url when i open my embeded bot?

No, I mean the URL you are passing to the "stylesheet"

Hi @elegant-vr-89667 I just set this up recently. In your situation, the bot is unable to access the URL link you gave it. The first thing you need to do is ensure the link you're using is working. to test the link try this 1. open an incognito window 2. paste the stylesheet url you want to use into your web browser and go to that link. 3. the web browser should then open the actual css file and youll be able to see it. 4. if you cannot see the actual css when you do this, your Bot cannot either. I host mine on s3 bucket, its literally like a google drive where you just drag and drop your css file into the folder then share the link to that file. its super easy, ask chatgpt how to do it. it should be quick. If youre doing this, and dont have AWS Setup, it will be worth the time to set up your account, you will use it for something in the future at somepoint. once your link is working.. then id move over to tweaking with the actual css.