Iframe Container Settings

The Supervised AI Bot uses a fixed-position popup container to display the chatbot interface on your WordPress site. This ensures the bot remains accessible to users as they scroll through your content.

Default Dimensions and Positioning

By default, the chatbot container is optimized for a balance between visibility and unobtrusiveness.

Height: 670px
Width: 400px (with a maximum expansion limit of 800px if customized)
Position: Fixed to the bottom-right corner (20px from the bottom and 20px from the right).
Corner Radius: 10px for a modern, rounded appearance.

Overriding Container Styles

If you need to adjust the dimensions or positioning to better fit your website's theme, you can apply custom CSS to your WordPress child theme or the "Additional CSS" section of the Customizer.

The primary class for the chatbot wrapper is .popup-container.

Example: Changing the Container Size

To make the chatbot taller or wider, target the container and the internal iframe wrapper:

/* Adjust the main popup size */
.popup-container, 
.popup-body, 
.iframe-container {
    height: 750px; /* New height */
    width: 450px;  /* New width */
}

Example: Repositioning the Bot

If your site has a "Back to Top" button or other elements in the bottom-right corner, you can move the bot to the left side:

.popup-container, 
.circle-button {
    right: auto;
    left: 20px;
}

Layering and Z-Index

The chatbot container is assigned a z-index of 1001, and the activation button is assigned 9999. This ensures that the chatbot appears above most standard website elements, including navigation bars and images.

If the chatbot is being hidden by other elements on your site (like a sticky header or a different plugin), you can increase the container's priority:

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

Responsive Behavior

The iframe container uses a fixed width (400px). On mobile devices with screens narrower than 400px, you may wish to add a media query to ensure the container scales to the viewport width:

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        height: 80vh; /* Uses 80% of the viewport height */
    }
}

Visibility Controls

The visibility of the iframe is controlled by the .circle-button trigger.

Open: Displays the .popup-container.
Close: Hides the container via the closePopup() function.
Header/Footer: By default, the plugin hides the internal iframe header and footer (display: none) to provide a seamless "Supervised AI" experience focused entirely on the chat interface.