Iframe Constraints

Iframe Constraints and Display

The Supervised AI Bots plugin delivers chatbots through a responsive iframe container designed to provide a non-intrusive user experience. The chatbot interface is housed in a floating popup triggered by a persistent action button.

Default Dimensions and Positioning

By default, the chatbot container is optimized for modern web layouts with the following constraints:

• Height: Fixed at 670px.
• Width: Defaults to 400px with a max-width limit of 800px.
• Position: Fixed to the bottom-right corner of the viewport, maintaining a 20px offset from the edges.
• Z-Index: The container uses a high z-index (1001) to ensure it appears above most theme elements, while the toggle button sits at 9999.

Responsive Behavior

The iframe container is designed to scale its internal content to 100% of the available width and height provided by the popup wrapper. While the container has a fixed width of 400px for standard desktop viewing, the max-width property allows it to adapt to larger display requirements if the parent container is modified.

Customizing Dimensions

If your chatbot requires more or less screen real estate, you can override the default constraints by adding custom CSS to your WordPress theme. The plugin utilizes specific class names to manage the iframe delivery:

/* Example: Increasing the chatbot width for wider interfaces */
.popup-container {
    width: 500px !important;
    height: 750px !important;
}

/* Ensure the iframe container matches the new height */
.popup-body, .iframe-container {
    height: 750px !important;
}

Technical Limitations

• External Frame Restrictions: The plugin renders bots via an <iframe> tag. Ensure that your Supervised AI bot URL allows "Framing" or "X-Frame-Options" to avoid connection Refused errors.
• Mobile Viewport: On very small mobile devices (less than 400px wide), the fixed width may exceed the viewport. It is recommended to test the chatbot on mobile and apply media queries if a narrower width is required for smaller screens:

@media (max-width: 480px) {
    .popup-container {
        width: 90% !important;
        right: 5% !important;
    }
}

Visibility Control

The iframe is managed by a toggle mechanism. It remains hidden in the DOM (display: none) until the floating circle button is clicked. This ensures that the chatbot assets do not interfere with the initial page load or layout until user interaction occurs.