how can i make chatbot responsive (desktop vs mobi...
# 🤝helpb
blue-psychiatrist-60466
07/12/2023, 12:29 AMMy chatbot works fine but the font size is too small when I tried it on my phone (screenshot attached). I need to zoom to read messages..How can i make the chatbot responsive so that the font and chatbot are properly displayed on a desktop and mobile device? Sorry if this was asked before! Thanks
r
rapid-manchester-41665
07/12/2023, 2:19 AMI also have this question
f
future-action-19564
07/12/2023, 2:24 AMHi, you can try using this and it will also make everything mobile compatible 🙂
https://styler.botpress.app/
after you get the link with all the css in it, simply copy it and open it in another tab and copy all the CSS code and replace it with ur own
b
blue-psychiatrist-60466
07/12/2023, 2:47 AMThanks the info. Sorry that I am not familiar with CSS. Is it possible to describe how i can do the last part (“replace with ur own”)? I was able to the previous steps but not the last one.
f
future-action-19564
07/12/2023, 2:53 AMAll good. I assume that you do not have a css stylesheet linked to your code. If so, what you can do is just go to your bot’s integrations on botpress, then go to webchat which should already be open and just paste the link that the web chat styler gave you here
future-action-19564
07/12/2023, 2:54 AMAfter that hit save and click on the “configurable” tab. Copy the code that’s there and paste into your HTML code.
b
blue-psychiatrist-60466
07/12/2023, 3:09 AMI got it working. Thanks! @future-action-19564
blue-psychiatrist-60466
07/12/2023, 3:11 AMIt seems like the Shareable URL under Pre-configured tab is not reflecting the change. The URL still shows the default chatbot while the manual copy shows the format from the stylesheet.
d
dazzling-army-23945
07/12/2023, 3:17 AMHere's a video tutorial
b
blue-psychiatrist-60466
07/12/2023, 4:11 AMThank you.
w
white-kitchen-93679
07/15/2023, 12:27 AM@rough-smartphone-28502
b
billowy-gold-20984
07/15/2023, 4:36 AMits not working for me. I copied the html code into my website but not working
billowy-gold-20984
07/15/2023, 4:43 AMhttps://cdn.discordapp.com/attachments/1128483133696770130/1129634246915526716/Capture.PNGâ–ľ
s
straight-musician-77995
07/15/2023, 8:04 AMbro, would be good to have the option to modify the raw css file
f
future-action-19564
07/15/2023, 5:17 PMYou can modify the CSS file. Just copy the link the link that the web chat styler gives you and then paste into chrome. Than copy all the css code it gave you.
Then finally go back to the place I showed in the image and this time type your websites name like this: https://example.com/test.css
You’ll notice that I added “/test.css” that’s because now your gonna go to your websites code wherever it is and add a new css file, in my case it was “test.css”. Now in that test.css add all the code I told you to copy in the first step and boom now you can configure it how you want !
Important note: this will only work when you publish your website and you will see no changes in your bot’s CSS until then. However if you wanna play around and test some things you can change the style sheet url to the local port that you are testing on. ex. If it’s port 5500 then type localhost:5500/test.css
future-action-19564
07/15/2023, 5:19 PMTo see what local port your websites running on, run your code on your computer and look at the number in the top URL bar, if it says 3000 then the port is 3000
future-action-19564
07/15/2023, 5:19 PMIt has to be in the body of your HTML
173 Views