Iframe Delivery System

Iframe Delivery System

The Supervised AI Bots plugin utilizes a specialized iframe delivery system to embed chatbot interfaces into WordPress sites. This system ensures that the AI bot remains isolated from the host site's styles and scripts while maintaining a consistent user experience.

Overview

The delivery system consists of three main components:

1. Shortcode Processor: Converts the [supervised_ai_bot] shortcode into a secure HTML container.
2. Iframe Wrapper: Isolates the Supervised AI URL to prevent CSS conflicts.
3. Popup Controller: Manages the visibility and lifecycle of the chatbot interface via a floating action button.

Embedding Mechanism

To display a chatbot, the plugin injects a responsive iframe into a fixed-position popup container. The iframe is configured to fill its parent container entirely, ensuring that the bot's native interface handles the internal layout.

Example Shortcode Usage:

[supervised_ai_bot id="1"]

The system retrieves the URL associated with the provided ID from your settings and generates the following structure:

<div class="popup-container" id="popup">
    <div class="popup-body">
        <div class="iframe-container">
            <iframe src="YOUR_BOT_URL" frameborder="0"></iframe>
        </div>
    </div>
</div>

Responsive Scaling & Dimensions

The delivery system is optimized for a portrait-oriented chat experience, typically anchored to the bottom-right of the viewport.

• Default Dimensions: The chat window is set to a width of 400px and a height of 670px.
• Maximum Constraints: For larger displays, the container supports a max-width of up to 800px.
• Scaling Logic: The .iframe-container uses absolute positioning to ensure the iframe scales dynamically to 100% of its parent's height and width, regardless of the device's screen size.

Sandboxing and Security

The use of an iframe acts as a natural security sandbox.

• Isolation: The Supervised AI interface operates in its own window context, preventing WordPress theme styles from breaking the bot's UI.
• No Interference: JavaScript execution within the bot does not conflict with the host site's custom-popup-script.js or other active plugins.

Client-Side Interaction

The delivery system is toggled via a floating circle button. Users can interact with the delivery state using the following internal JavaScript functions if manual control is required:

| Function | Description | | :--- | :--- | | togglePopup() | Switches the display state of the bot between block and none. | | closePopup() | Explicitly hides the bot container. |

Layout Customization

While the delivery system works out-of-the-box, developers can override the delivery dimensions by targeting the following CSS classes in their theme:

/* Example: Customizing the bot window size */
.popup-container {
    width: 350px; /* Adjust width */
    height: 500px; /* Adjust height */
}

.iframe-container {
    height: 500px; /* Ensure this matches the parent height */
}