Responsive Dimensions

The Supervised AI Bot is designed to appear as a floating interface in the bottom-right corner of your website. By default, the plugin uses fixed dimensions to ensure the chat interface remains readable and accessible.

Default Layout Specifications

The following dimensions are applied to the chatbot components out of the box:

Launcher Button (.circle-button): 60px x 60px.
Chat Window (.popup-container): 400px width and 670px height.
Edge Offset: 20px from the bottom and 20px from the right of the viewport.

Mobile Responsiveness

On smaller screens, fixed widths may exceed the viewport size. To ensure a seamless experience for mobile users, it is recommended to add a media query to your theme's stylesheet or the WordPress "Additional CSS" section.

The following example adjusts the chatbot to occupy more screen real estate on devices with a width of 480px or less:

/* Responsive adjustments for mobile devices */
@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;          /* Occupy most of the screen width */
        right: 5%;           /* Center the popup horizontally */
        height: 80vh;        /* Limit height to 80% of the viewport */
        bottom: 80px;        /* Shift up to avoid overlapping the button */
    }

    .circle-button {
        width: 50px;
        height: 50px;
        line-height: 50px;
        bottom: 15px;
        right: 15px;
    }
}

Customizing Container Size

If your chatbot content requires more horizontal space (for example, if you are displaying complex data or wide tables), you can increase the max-width of the container. The plugin's CSS allows for a maximum width of up to 800px if specifically defined.

To modify the default window size for desktop users, use the following CSS:

/* Increase desktop chat window width */
.popup-container {
    width: 500px; 
    height: 700px;
}

/* Ensure the iframe scales to match the new container height */
.popup-body, .iframe-container {
    height: 700px;
}

Z-Index Management

The chatbot interface is set to a high z-index (1001 for the container and 9999 for the launcher) to ensure it appears above other website elements like headers or footers. If the chatbot is being hidden by your theme's existing elements, you can increase these values:

.circle-button {
    z-index: 10000; /* Ensure button stays on top */
}

.popup-container {
    z-index: 9999;
}