Mobile Optimization

The Supervised AI Bot is designed to provide a consistent user experience across desktops, tablets, and smartphones. By default, the chatbot appears as a floating action button (launcher) that opens a dedicated chat window.

Responsive Behavior

The chatbot interface uses fixed positioning to remain accessible regardless of page scrolling. On mobile devices, the following behaviors are applied:

Launcher Position: The floating circle button is positioned at the bottom-right of the viewport (20px from the edges) to ensure it is easily reachable for thumb navigation.
Chat Window Scaling: The default chat container is set to a width of 400px. On smaller mobile screens, this may exceed the viewport width.

Customizing for Smaller Screens

To ensure the chatbot provides the best experience on mobile devices, you can add custom CSS to your WordPress theme (via Appearance > Customize > Additional CSS).

The following example demonstrates how to make the chat window responsive so it fills more of the screen on devices with a width of 480px or less:

@media screen and (max-width: 480px) {
    /* Make the popup container responsive */
    .popup-container {
        width: 90% !important;
        right: 5% !important;
        bottom: 80px !important; /* Move up to clear the launcher or nav bars */
        height: 80vh !important;  /* Use viewport height for better fit */
    }

    /* Adjust the iframe height to match the new container height */
    .popup-body, .iframe-container {
        height: 80vh !important;
    }
}

Touch Interaction

The interface is optimized for touch interaction:

Click-to-Toggle: Users can tap the blue circle button to open or close the chat interface.
Scroll Management: The chat window includes internal scrolling (overflow: hidden on the container, but the iframe handles its own content), preventing the background website from scrolling while the user interacts with the bot.

Viewport Best Practices

To ensure the chatbot renders correctly on mobile, verify that your WordPress theme includes the standard viewport meta tag in the <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1">

Z-Index Management

The chatbot uses a high z-index (9999 for the button and 1001 for the window) to ensure it stays above mobile navigation menus and other floating elements. If you find the chatbot is hidden behind your theme's mobile header, you can increase these values in your custom CSS:

.circle-button {
    z-index: 99999 !important;
}
.popup-container {
    z-index: 99998 !important;
}