Fullscreen
# 🤝helpg
gray-activity-74012
03/30/2024, 1:40 AMGreetings everyone!
I shared my web chat bot, but when viewed from a mobile phone, the screen doesn't display in full.
I saw there is documentation to do it:
https://botpress.com/docs/cloud/webchat-customization/full-screen-bot/
But I'm not exactly sure how to configure it.
Should I add it in the 'Advanced Styler' or what should I do?
https://cdn.discordapp.com/attachments/1223446736610136155/1223446736958128249/98e0a18f-dceb-4a94-92a1-5fee184b0669.png?ex=6619e290&is=66076d90&hm=921d42ef6d4236160fc8267c5dcebfa8c7f72f7885352fe2241fe76cd7fbe2f9&
https://cdn.discordapp.com/attachments/1223446736610136155/1223446737222373468/estilo.jpeg?ex=6619e290&is=66076d90&hm=f63773ffc211f956de7081e2c7d018ef2dd53f00ec54a9a24ed676fa692606f4&
f
fresh-fireman-491
03/30/2024, 11:00 AMHey there,
You can see how we did it here https://discord.com/channels/1108396290624213082/1220310570733928508
g
gray-activity-74012
03/30/2024, 1:22 PMThank you for the response. So, should I copy the code you provided:
/* Updated full-screen styling for the chat window */
.bpw-layout {
width: 100vw !important;
height: 100vh !important;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0; /* Ensure it's not cut off by starting from the left edge */
margin: 0; /* Remove any default margins */
border-radius: 0; /* Full screen typically doesn't need rounded corners */
border: none;
z-index: 1000; /* Adjust as necessary to ensure it's above other content */
}
and paste it into the "Advanced Styler"?
Afterward, I run the code and copy the link from "Style your bot" and paste it into "Stylesheet URL."
https://cdn.discordapp.com/attachments/1223446736610136155/1223623479669166201/image.png?ex=661a872b&is=6608122b&hm=a37abecd01ddb6a51923e7f62a188c5f567303f587363c8abe7adc12eb85048b&
f
fresh-fireman-491
03/30/2024, 1:24 PMThis is supposed to go in your HTML file:
Copy code
html
<style>
.bp-widget-side {
width: 100% !important;
height: 100vh !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
border: none !important;
border-radius: 0 !important;
overflow: hidden !important;
}
</style>fresh-fireman-491
03/30/2024, 1:24 PMThis is supposed to go in your stylesheet:
Copy code
css
.bpw-layout {
width: 100vw !important;
height: 100vh !important;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
border-radius: 0;
border: none;
z-index: 1000;
}g
gray-activity-74012
03/30/2024, 1:27 PMWhen you refer to my HTML file, do you mean I should have a website where I apply the changes to fit the Chat configuration? The truth is, I only use the web chat and share it as a "chat." I'm a bit unfamiliar with the topic. 😓
f
fresh-fireman-491
03/30/2024, 1:28 PMAh okay. I do mean that you should have a website were you do the changes.
I am not sure if we can do that much if you are using the webchat from Share.
g
gray-activity-74012
03/30/2024, 1:34 PMAt the moment, could you suggest me any alternative?
Or use someplace where you can host the code?
f
fresh-fireman-491
03/30/2024, 1:36 PMYou can just buy a domain, and make a simple website, with just the chatbot
fresh-fireman-491
03/30/2024, 1:37 PMI use Simply.com because its a Danish web hosting provider, and therefore easier for me to use when I was younger, but there are a lot of great options out there.
g
gray-activity-74012
03/30/2024, 1:46 PMExcellent thank you very much!!
Now I'm doing more research on the matter. 🤩
f
fresh-fireman-491
03/30/2024, 1:48 PMAmazing! There are better options than Simply.com! Wouldn't really recommend it. I am just hosting everything here, but I should probably find a cheaper solution 🙂