Iframe Architecture

The Supervised AI Bots plugin utilizes a sandboxed Iframe Architecture to embed AI chatbot interfaces into WordPress sites. This approach ensures that the chatbot's logic, styling, and external scripts are isolated from the host website, preventing CSS conflicts and JavaScript namespace pollution.

Core Architecture Overview

The chatbot interface is encapsulated within a responsive popup container. When a user interacts with the floating action button, the plugin dynamically displays an iframe that loads the specified Supervised AI URL.

Isolation: The iframe creates a clean boundary, preventing the chatbot's code from interfering with your theme's functionality.
Persistence: By using a dedicated container, the chatbot maintains its state while the user navigates the current page.
Security: Embedding interfaces via iframes allows for cross-origin security headers to be respected, ensuring data is transmitted securely between the user and the Supervised AI platform.

Container Specifications

The plugin uses a fixed-position container to house the iframe. Developers can target these classes in their custom CSS to override default dimensions or positioning.

Iframe Implementation

The iframe is wrapped in an .iframe-container to maintain a 1:1 aspect ratio with the popup body.

<!-- Structural Example of the Iframe Container -->
<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>

Trigger Mechanism

The visibility of the iframe architecture is managed through a lightweight JavaScript toggle. This allows the AI interface to be loaded or hidden without a page refresh.

Toggle Function: togglePopup() — Switches the display state of the .popup-container between block and none.
Close Function: closePopup() — Forces the .popup-container to hide.

Customization via CSS

While the iframe isolates the internal chatbot styles, you can customize the outer container and the launcher button to match your branding.

/* Example: Customizing the launcher button color */
.circle-button {
    background-color: #007bff; /* Primary Brand Color */
    bottom: 30px;              /* Move higher from bottom */
    right: 30px;               /* Move further from right */
}

/* Example: Adjusting the chatbot popup height for mobile */
@media (max-width: 600px) {
    .popup-container {
        width: 90%;
        height: 80%;
        bottom: 10px;
        right: 5%;
    }
}

Technical Notes

Initialization: The iframe architecture is injected into the footer of your WordPress site only when the [supervised_ai_bot] shortcode is present on a page.
Compatibility: Ensure your Supervised AI URL allows iframe embedding (X-Frame-Options should not be set to DENY).