How can I change the location of a chatbot widget ...
# 🤝helpb
bitter-wire-11526
04/11/2024, 6:20 PMWhen I change the CSS code in the advanced styler, there is no response of any kind. Nothing changes. I need to move the chatbot widget on mobile to the extreme corner of the screen and possibly make the widget smaller. What changes should I make to the code to achieve this objective?
/* Styling for the layout of the chat bubble. Width, height, border, position and radius of the chat bubble */
.bpw-layout {
width: 360px !important;
height: 60vh;
border-radius: 10px;
right: 10px;
bottom: 5px;
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;
}
}
s
square-toddler-30705
04/11/2024, 7:27 PMHi, you must play with widget settings as well.
'containerWidth': '100%25',
'layoutWidth': '100%25',
I change it for each device using CSS and javascript by recognizing the screen size.
Use it inside your bot webchat->configurable:
window.botpressWebChat.init({
"botId": "",
"hostUrl": "https://cdn.botpress.cloud/webchat/v1",
"messagingUrl": "https://messaging.botpress.cloud",
"clientId": "",
"webhookId": "",
"lazySocket": true,
"themeName": "prism",
"botName": "",
"avatarUrl": "",
"stylesheet": "",
"frontendVersion": "v1",
"useSessionStorage": true,
"enableConversationDeletion": true,
"themeColor": "#2563eb",
"containerWidth": "100%25",
"layoutWidth": "100%25",
});
square-toddler-30705
04/11/2024, 7:31 PMExample:
CSS
.bp-widget-side {
height: 95vh !important;
z-index: 99999;
max-width: 670px;
top: 5px;
right: 5px;
}
/* MOBILE - LAYOUT HEIGHT IS SET IN THE CSS FILE */
@media only screen and (max-width: 677px) {
.bp-widget-side {
height: 100vh !important;
max-width: unset;
top: unset;
right: unset;
}
}
/* MOBILE HORIZONTAL */
@media only screen and (max-width: 1024px) and (max-height: 450px) {
.bp-widget-side {
height: 100vh !important;
max-width: unset;
top: 0;
right: 0;
left: 0;
}
}
/* TABLET */
@media only screen and (max-width: 1024px) {
.bp-widget-side {
height: 90vh !important;
height: 100vh !important;
max-width: unset;
top: 0;
right: 0;
left: 0;
}
}
JS
// Set container and layout widths based on screen size
var containerWidth, layoutWidth;
if (screenWidth > 1024) { // Desktop
containerWidth = "35%25";//Can be set by the CSS style above: .bp-widget-side width -> max width is set to 670px for big screens
layoutWidth = "100%25";//Chat window width inside the container
chatStyle = chat1024Style;
} else if (screenWidth <= 1024 && screenHeight <= 450 ) { // Mobile Horizontal
containerWidth = "100%25";
layoutWidth = "80%25";
chatStyle = chatMobileHorizontal;
} else if (screenWidth 678) { // Tablet
containerWidth = "100%25";
layoutWidth = "80%25";
chatStyle = chatTablet;
} else { // Mobile
containerWidth = "100%25";
layoutWidth = "100%25";
chatStyle = chatMobile;
}
g
glamorous-guitar-39983
04/12/2024, 12:19 AMI found this CSS to be working on PC, don't know about mobile version :
#bp-web-widget.bp-widget-widget.bp-widget-web {
height: 200px!important;
width: 200px!important;
top: 1171px!important;
right: -71px!important;
max-height: none!important;
max-width: none!important;
}
.bp-widget-widget {
max-height: none!important;
max-width: none!important;
top: 100px!important;
right: 233px!important;
}
2 Views