Change the size of AI Chatbot's window size (Mobile only)

CSS Codes AI Chatbot
1

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!

5 Likes
2

Hey there, @PeterC :wave:

Works like a charm! A huge thank you for sharing your solution and yes, welcome to the Community :wink:

2 Likes
3

Hi there,

I use it like this and it works :slightly_smiling_face:

https://community.elfsight.com/t/display-chat-window-on-mobile-like-on-desktop/97100/2?u=sina

@media(max-width: 500px) {
  [class^="window-transition__Container-sc"] {
    transform: scale(0.94);
    margin-top: -10px !important;
  }
}
3 Likes
4

Hi @Sina :wave:

The code by @PeterC provides a more detailed customization of the window position, height and form, but your code is also correct and works great :slightly_smiling_face:

3 Likes
5

Where do I add the CSS code to update the widget?

2 Likes
6

Hi @BratPak_Dog_Kamp
Add this code to the Custom CSS field on the General tab of your AI Chatbot widget’s settings and publish the widget.

1 Like
7

Thanks!

1 Like