Responsive Layouts

The Supervised AI Bots plugin is designed to provide a consistent user experience across various screen sizes. The chatbot interface utilizes a fixed-position floating layout that remains accessible regardless of page scrolling.

Default Positioning

The chatbot interface consists of two primary elements:

Floating Launcher: A circular blue button (60px x 60px) fixed to the bottom-right corner of the viewport.
Popup Container: The chat window that appears when the launcher is clicked.

By default, the layout uses the following dimensions:

| Element | Width | Height | Position | | :--- | :--- | :--- | :--- | | Launcher Button | 60px | 60px | Bottom: 20px, Right: 20px | | Chat Window | 400px | 670px | Bottom: 20px, Right: 20px |

Mobile Viewport Behavior

The chatbot maintains its fixed position on mobile devices to ensure users can always find support. Because the chat window has a fixed width of 400px, it is optimized for tablets and larger mobile screens.

On very narrow mobile devices (less than 400px wide), the window will maintain its width. If you need to ensure the chatbot fits perfectly on smaller screens, you can add a media query to your theme's CSS to adjust the width dynamically.

Customizing Dimensions

While the plugin provides a robust default layout, you can override the responsive behavior by adding custom CSS to your WordPress theme. This is useful if you want the chatbot to occupy more screen real estate on desktop or go full-screen on mobile.

/* Example: Make the chatbot responsive on smaller screens */
@media (max-width: 480px) {
    .popup-container {
        width: 90% !important;
        right: 5% !important;
        left: 5% !important;
        height: 80vh !important;
        bottom: 80px !important;
    }
}

Depth and Overlay

The chatbot is configured with a high z-index (up to 9999 for the launcher), ensuring that it floats above other page elements, including navigation bars and images. This prevents the bot from being hidden by theme-specific layouts or "sticky" headers.

Popup Z-Index: 1001
Launcher Z-Index: 9999

UI Visibility

The layout is designed to be "clean," meaning the header and footer of the internal chatbot iframe are hidden by default to focus entirely on the chat conversation. The window features rounded corners (10px) and a subtle drop shadow to provide visual separation from your website's content.