Responsive Adjustments

The Supervised AI Bot widget is designed to maintain a consistent, user-friendly presence across various screen sizes. By default, the chatbot launcher and the chat window are anchored to the bottom-right corner of the viewport to ensure they remain accessible without obstructing your website's main content.

Default Dimensions

The chat widget uses the following default dimensions for desktop and tablet displays:

Width: 400px
Height: 670px
Position: Fixed, 20px from the bottom and 20px from the right.
Launcher: A 60x60px circular button.

Optimizing for Mobile Devices

While the default 400px width fits most tablet and desktop screens, you may wish to adjust the widget's appearance for narrower mobile devices (such as smartphones) to ensure the chat window doesn't overflow the screen or cover essential navigation.

To customize the responsiveness, you can add CSS overrides to your WordPress theme's "Additional CSS" section or your child theme's stylesheet.

Example: Full-Width Mobile View

If you want the chatbot to occupy most of the screen width on devices smaller than 480px, use the following media query:

@media only screen and (max-width: 480px) {
    /* Adjust the chat container for small screens */
    .popup-container {
        width: 90% !important;
        right: 5% !important;
        bottom: 80px !important; /* Raised to stay above the launcher */
        height: 70vh !important; /* Uses viewport height for better scaling */
    }

    /* Ensure the iframe scales with the container */
    .popup-body, 
    .iframe-container {
        height: 100% !important;
    }
}

Adjusting Z-Index

The widget is set with a z-index of 9999 for the launcher button and 1001 for the popup container. This ensures the bot remains visible above most WordPress themes and page builders.

If the chatbot is appearing behind your site's navigation menu or other sticky elements, you can increase these values:

.circle-button {
    z-index: 10000; /* Increase if hidden by theme elements */
}

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

Visibility Controls

The widget utilizes simple JavaScript triggers to toggle visibility. When a user clicks the launcher, the togglePopup() function switches the container's display property.

Open State: display: block
Closed State: display: none

If you are using a mobile-specific caching plugin or a "Mobile Version" of your site, ensure that the custom-popup-script.js and custom-popup-style.css files are permitted to load, as the responsiveness relies on these assets being present in the document head and footer.