Hi! Here is a snippet of CSS code I’m using to make the chatbot window smaller on Mobile View instead of the default full-page view, and positioned towards the bottom-right where my icon is, with 40px border radius (rounded corners):
@media screen and (max-width: 768px) {
.es-window-container {
width: 80vw !important;
height: 78vh !important;
max-width: none !important;
max-height: none !important;
position: fixed !important;
bottom: 135px !important; /* 135px from the bottom */
right: 0px !important; /* 0px from the right */
left: auto !important; /* Override left positioning */
top: auto !important; /* Override top positioning */
border-radius: 40px !important; /* Rounded corners */
overflow: hidden !important; /* Prevents content from overflowing */
}
}
Hope this helps you all!