Embed webchat CSS without a server
# 🤝help
e
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?
a
Hi @elegant-vr-89667, when you initialize the bot, are you specifying the CSS in the
stylesheet
parameter? Like:
Copy code
// 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>
We also have some documentation about customization here https://botpress.com/docs/cloud/webchat-customization/overview/
e
i did referred to the CSS elements provided here
but doing it inside the CSS file of my localhost website doesnt affect the appearance of the chatbot
a
what does your CSS file look like right now?
e
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
a
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?
e
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
a
Yep, just tested in in Chrome and
.bpw-header-name
is the right rule. How are you embedding your bot into the page?
e
inside shopPage.php, from line 212 to 226
a
in
window.botpressWebChat.init
on line 214, try adding the parameter
stylesheet:ShopPage.css
e
the parameter doesnt help
going out of topic for a while, may I ask if there is any feature in botpress that makes the bot starts talking first without embedding it in a website?
a
🤨 hmmm I'm not sure what might be preventing the CSS from making changes. Maybe @acceptable-gold-88171 could get his eyes on this?
To answer your other question, there's not a feature for proactive bots yet, but that's something in the pipline
e
alright, thank you for your help
f
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.
What you can do is to host it on s3 or another media and use the URL.
The idea is you need to upload the CSS file somewhere - like S3 bucket, and then use the URL in Botpress webchat channel configuration:
As a workaround, you can go to your bot flow diagram, add a file anywhere:
Upload your file:
Copy the URL:
Then past it in the webchat channel configuration.
e
thank you for explaining, Bassam.
f
Give it a try and keep me posted 🙂
e
sorry to inform that I'm not planning to have my website hosted outside 😅 but still thanks a lot for solving my doubts
f
Anytime! There are a lot of free hosting websites, __personal__ recommendation would be: https://tiiny.host/host-html-file/
a
@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 🙂
e
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
a
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?
f
I agree, ftp will not work
e
do you mean the url when i open my embeded bot?
Sad to hear that😓
f
No, I mean the URL you are passing to the "stylesheet"
s
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.
21 Views