My chatbot works perfectly on pc, but I want to make it smaller on mobile cause it hides all my website

Maybe you could do some css?

Hello you must do it manually in the meantime, if you know CSS you can modify the css in the integrations part, that was the way I could do it, also if you integrate it with the "Configurable" you can add some properties such as height and width of the chatbot window. Those would be the two ways that I think it can be done

Yes I knew it but I don't know CSS

/* Styling for the layout of the chat bubble. Width, height, border, position and radius of the chat bubble */ .bpw-layout { width: 360px !important; height: 70vh; border-radius: 10px; right: 10%; bottom: 5%; border: 1px; } /* Responsive design rules for devices with width less than or equal to 767px */ @media screen and (max-device-width: 767px) { .bpw-layout { width: 100% !important; height: 100%; right: 0; bottom: 0; border-radius: 0; } }

Thanks bro!

hello bro where do i like paste this code? in my website css or where I am confused with same issue

Hi Shery, First go to the integrations part in the main menu of the workspace, then go to Stylesheet URL to go to the part to set the style of the chatbot, on the left side you have two options, in Advanced Styler you can go configuring, if you do it this way you do it from scratch, although you can also do it in the first option Style your Bot, you do the basic configurations and generate the link at the end, then go to where that link takes you, copy all that css and then go to Advanced Styler and delete what is there and copy the one that was previously generated, for the chatbot sample to change in this part remember to hit Run at the top, and here you will have a base and you can search the kind of css you want to modify, always remember to hit run to see the changes in the chatbot on the right

thank u so much bro, ok so whatever I want to make changes i have to do it in the advance styler and i dont need to go anywhere else

remember to click on Run at the top to see the modifications you have made in the chatbot on the right side.

thanks bro I am able to reach here and edit out but still can't figure out what code to edit for mobile screen like what should the number be i tried everything still it wont work on mobile ( /* Responsive design rules for devices with width less than or equal to 767px */ @media screen and (max-device-width: 767px) { .bpw-layout { width: 100% !important; height: 100%; right: 0; bottom: 0; border-radius: 0; }