Stylesheet
# 🤝help
a
Hey botpress community. I have a webpage that I've integrated my bot into. Only issue i have currently is that i can't get the stylesheet to load my customizations. So i had created my stylesheet and loaded it into Gdrive and shared the link into the customization field and it wasn't working. So deleted all the code in stylesheet and only kept the icon to chatbot button to focus on just getting 1 piece to work /*Icon to chatbot button .bpw-floating-button { background-image: imageurl here } Still nothing. The website is built on highpeekpro a crm platform. Code for bot has been inserted to a single page's footer to test it and can't seem to get the stylesheet reference to work. "stylesheet": "gdrivelink", is the line from the configurable tab - with the actual link info changed for privacy
a
Hey, @able-ice-93381, is your GDrive link publicly accessible? Here's a nice tutorial to make sure https://hwpi.harvard.edu/assetslibrary/host-css-or-js-file-google-drive
a
Yep it definitely is I actually referenced this same document in my problem solving
a
are there any errors in the browser console?
a
Only console remark related to botpress is regarding Video from background.js: but thats all
a
Would you mind posting the whole
init()
sequence that is in your
<script>
element?
a
window.botpressWebChat.init({ "composerPlaceholder": "Reply to Ellie Vate", "botConversationDescription": "Ellie Vate your AI bot to help on your trading journey", "botId": "19a9c1b3-2a3f-489c-b7cf-29b13267c018", "hostUrl": "https://cdn.botpress.cloud/webchat/v0", "messagingUrl": "https://messaging.botpress.cloud", "clientId": "19a9c1b3-2a3f-489c-b7cf-29b13267c018", "botName": "Ellie Vate", "avatarUrl": "https://i.ibb.co/qYB6Y5N/Screenshot-2023-07-03-092407.jpg", "stylesheet": "https://drive.google.com/uc?export=view&id=1JSm_eBM392q7XK0Y_dg_aRzx7gAoX1wN", "useSessionStorage": true, "showPoweredBy": true });
a
Hmmm there might be a check going on that makes sure the stylesheet URL ends in
.css
that is blocking it from loading. @bright-magazine-792 do you think this could be the case?
a
I tried a different upload that would give the URL with .css at the end https://static.staticsave.com/test123123/stylesheet.css still no luck
window.botpressWebChat.init({ "composerPlaceholder": "Reply to Ellie Vate", "botConversationDescription": "Ellie Vate your AI bot to help on your trading journey", "botId": "19a9c1b3-2a3f-489c-b7cf-29b13267c018", "hostUrl": "https://cdn.botpress.cloud/webchat/v0", "messagingUrl": "https://messaging.botpress.cloud", "clientId": "19a9c1b3-2a3f-489c-b7cf-29b13267c018", "botName": "Ellie Vate", "avatarUrl": "https://i.ibb.co/qYB6Y5N/Screenshot-2023-07-03-092407.jpg", "stylesheet": "https://static.staticsave.com/test123123/stylesheet.css", "useSessionStorage": true, "showPoweredBy": true });
a
I'm not sure if you can change which corner the button is with
float
. I've been trying it out on https://jsfiddle.net/ and I can get it to load with a custom stylesheet from https://styler.botpress.app/ but not with yours.
b
.bpw-floating-button {background-image: url("");} is not working in the styler nor in my website. Anyone solved this issue?
22 Views