Iframe Sandboxing

Iframe Container Overview

The Supervised AI Bots plugin utilizes a specialized iframe container to host chatbot interfaces. This ensures that the chatbot remains visually consistent and isolated from the host WordPress theme's CSS and JavaScript, preventing style bleed or functional conflicts.

Technical Dimensions

The chatbot interface is delivered via a responsive container designed to provide a mobile-app feel on desktop environments. By default, the iframe container uses the following specifications:

| Property | Value | Description | | :--- | :--- | :--- | | Height | 670px | Fixed height to maintain consistent chat history visibility. | | Width | 400px | Standard width, with a max-width of 800px for responsiveness. | | Positioning | fixed | The container is anchored to the bottom-right of the viewport. | | Z-Index | 1001 | Ensures the chat interface sits above most standard theme elements. |

Security and Isolation

To protect your site's integrity, the plugin renders chatbots within a sandboxed environment. This architecture provides several key benefits:

• Script Isolation: The chatbot's JavaScript runs independently of your WordPress site's scripts.
• Style Encapsulation: CSS rules within the chatbot do not affect your global site styles.
• Resource Protection: The iframe acts as a security boundary, preventing external bot scripts from accessing your site's document object model (DOM) or cookies unless explicitly permitted.

Integration Usage

The iframe is automatically generated when using the plugin's shortcode. You do not need to manually create the iframe element.

<!-- Example of the rendered output structure -->
<div class="popup-container" id="popup">
    <div class="popup-body">
        <div class="iframe-container">
            <iframe src="https://your-supervised-ai-url.com" frameborder="0"></iframe>
        </div>
    </div>
</div>

Customizing the Container

While the plugin provides a default optimized layout, developers can override the appearance by targeting the specific CSS classes in their theme's stylesheet:

/* Example: Customizing the popup width */
.popup-container {
    width: 450px; /* Overriding the default 400px */
}

/* Example: Adjusting the corner radius */
.popup-container {
    border-radius: 15px;
}

Interaction Logic

The iframe visibility is controlled by the togglePopup() and closePopup() functions. When the floating action button (circle button) is clicked, the iframe container transitions between display: none and display: block. This lazy-loading behavior ensures that the chatbot resources do not interfere with the initial page load speed.