how can i make chatbot responsive (desktop vs mobi...
# 🤝help
b
My 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
I also have this question
f
Hi, 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
Thanks 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
All 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
After that hit save and click on the “configurable” tab. Copy the code that’s there and paste into your HTML code.
b
I got it working. Thanks! @future-action-19564
It 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
Here's a video tutorial

https://youtu.be/FYrEo9UGdHk

b
Thank you.
w
@rough-smartphone-28502
b
its not working for me. I copied the html code into my website but not working

https://cdn.discordapp.com/attachments/1128483133696770130/1129634246915526716/Capture.PNG

s
bro, would be good to have the option to modify the raw css file
f
You 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
To 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
It has to be in the body of your HTML
150 Views