Iframe Optimization

Iframe Optimization and Responsiveness

The Supervised AI Bots plugin utilizes an optimized iframe embedding method to ensure that chatbots load efficiently without interfering with your website's core performance or layout. By isolating the chatbot within a contained iframe, the plugin prevents style conflicts between your WordPress theme and the chatbot interface.

Embedding Mechanism

The chatbot is delivered through a secure iframe nested within a fixed-position popup container. This container is toggled via a floating action button (launcher), ensuring the bot is accessible from any part of the page without requiring a dedicated section in your page layout.

To embed a bot, use the standard shortcode:

[supervised_ai_bot id="1"]

Dimensions and Sizing

The chatbot interface is optimized for high visibility and readability. The default dimensions are configured to provide a "sidebar-style" chat experience that feels native to modern web applications.

| Property | Value | Description | | :--- | :--- | :--- | | Default Width | 400px | The standard width for the chat window. | | Max Width | 800px | The maximum expansion allowed on larger displays. | | Height | 670px | A fixed height that ensures the chat interface fits within the viewport of most laptops and tablets. | | Positioning | Fixed | Anchored 20px from the bottom and right of the browser window. |

Responsive Design

The plugin uses a fluid iframe container to ensure the chat interface remains consistent across different screen resolutions. The internal CSS ensures the iframe occupies 100% of its parent container's dimensions.

CSS Optimization

The following CSS structure is applied to ensure the iframe scales correctly within its container:

.iframe-container {
    position: relative;
    height: 670px;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

Mobile Handling

For mobile users, the chatbot is designed to stay within the bounds of the viewport. The fixed positioning (bottom: 20px, right: 20px) and the circular launcher button (60px x 60px) follow standard mobile UI patterns, making it easy for users to interact with the bot via touch input.

Key Optimization Features:

• Zero Layout Shift: Because the iframe is contained within a fixed-position popup, it does not push your site's content around when opened.
• Isolated Scrolling: The .popup-body is configured with overflow: hidden to ensure that scrolling inside the chat window does not trigger unexpected scrolling on the parent website.
• Lightweight Launcher: The chatbot resources are only fully utilized when the user interacts with the launcher button, minimizing the initial page load impact.