Mobile Responsiveness

The Supervised AI Bot interface is designed to maintain accessibility and functionality across a variety of screen sizes, including desktops, tablets, and mobile devices.

Floating Chat Trigger

On mobile screens, the chatbot is initiated via a high-visibility circular button (Floating Action Button). This button is fixed to the bottom-right corner of the viewport, ensuring it remains accessible even as users scroll through your content.

Touch-Friendly Target: The trigger button is optimized for touch interaction with a 60px diameter, meeting standard mobile accessibility guidelines.
Layering: The button uses a high z-index to stay above page elements, preventing it from being obscured by theme-specific layouts.

Popup Container Behavior

When activated, the chat interface appears in a dedicated popup container. The container is styled to provide a focused chat experience:

Consistent Sizing: By default, the chat window maintains a width of 400px and a height of 670px, providing a spacious environment for interactive conversations.
Overlay Design: The popup uses fixed positioning to float above the website content, allowing users to interact with the bot without reloading the page.

Iframe Integration

The chatbot content itself is delivered through a responsive iframe container.

Auto-Scaling: The iframe is configured to fill 100% of its parent container's width and height, ensuring that the Supervised AI interface utilizes all available space within the popup.
Overflow Management: The interface is set to handle overflow internally, preventing the chatbot window from creating unwanted scrollbars on your main WordPress site.

Customizing Mobile Layouts

For advanced users who wish to modify the chatbot's footprint on smaller screens (e.g., making the window full-screen on mobile), you can override the default styles in your WordPress theme using CSS media queries.

Example of making the chat window more fluid on small devices:

/* Example: Adjusting the chatbot for screens smaller than 480px */
@media screen and (max-width: 480px) {
    .popup-container {
        width: 90% !important;
        right: 5% !important;
        height: 70vh !important;
        bottom: 90px !important;
    }
}

Best Practices for Mobile Usage

Placement: Ensure your WordPress theme does not have other floating elements (like "Back to Top" buttons) that overlap with the chatbot's default bottom-right position.
Testing: We recommend testing the chatbot visibility on both iOS and Android browsers to ensure the fixed positioning does not interfere with browser-specific navigation bars.