Responsive Behavior

The Supervised AI Bot is designed as a floating widget that persists across your site, ensuring accessibility for users on various devices. The interface consists of a toggleable "Circle Button" and a popup container that houses the chatbot iframe.

Desktop Performance

On standard desktop displays, the chatbot remains docked to the bottom-right corner of the viewport. This ensures it does not interfere with the primary navigation or content of your WordPress site.

Dimensions: The default popup size is 400px wide by 670px tall.
Positioning: Fixed at 20px from the bottom and right edges of the screen.
Overlay: The widget uses a high z-index (1001) to ensure it appears above other theme elements, such as sliders or sticky headers.

Mobile and Tablet Scaling

The chatbot maintains its fixed positioning on smaller screens. Because the widget uses a fixed width, it is important to note how it interacts with mobile viewports:

Trigger Button: The floating action button (the blue circle) maintains a consistent size of 60px, making it easily "tappable" for mobile users.
Popup Width: The container is set to a width of 400px with a max-width of 800px. On devices narrower than 400px (such as older smartphones), the widget may exceed the viewport width.

Customizing Responsiveness

If your WordPress theme requires different scaling (e.g., making the chatbot full-screen on mobile devices), you can override the default styles in your theme's CSS file or via the WordPress Customizer.

The plugin utilizes the following CSS classes for its responsive layout:

/* Example: Making the bot full-width on screens smaller than 480px */
@media screen and (max-width: 480px) {
    .popup-container {
        width: 100% !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    .iframe-container, 
    .popup-body {
        height: 100% !important;
    }
}

Visibility Control

The chatbot interface is hidden by default. It only initializes and becomes visible to the user once the floating circle button is clicked. This "on-demand" behavior ensures that page load performance and mobile screen real estate are preserved until the user actively seeks assistance.