Iframe Integration Specs

Iframe Integration Specifications

The wpai plugin uses a secure iframe encapsulation method to render external Supervised AI chatbot interfaces within your WordPress environment. This approach ensures that the chatbot remains isolated from the site's core styles while providing a floating, interactive experience for the visitor.

Container Layout and Dimensions

The chatbot interface is housed within a fixed-position popup container. The visual specifications are controlled via the plugin's CSS to ensure consistent behavior across different themes.

| Property | Specification | | :--- | :--- | | Position | Fixed (Bottom-right corner) | | Default Width | 400px (Scalable up to 800px) | | Default Height | 670px | | Z-Index | 1001 (Overlaying standard site content) | | Border Radius | 10px |

Shortcode Implementation

The plugin dynamically generates the iframe source based on the id provided in the shortcode. Each URL added to the plugin settings is mapped to a numeric ID (based on the line number).

[supervised_ai_bot id="1"]

Attribute Details:

• id: (Required) The row number corresponding to the chatbot URL saved in the Supervised AI Bots settings page.

Iframe Attributes

The iframe itself is configured to occupy the full dimensions of the popup container. It uses the following technical attributes for seamless integration:

<iframe 
    src="[YOUR_CHATBOT_URL]" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen>
</iframe>

Trigger Mechanism

The integration includes a toggle script that controls the visibility of the iframe container.

1. The Trigger: A circular floating action button (FAB) is rendered at the bottom-right of the viewport.
2. The Action: Clicking the button invokes the togglePopup() function, which switches the display state of the .popup-container between none and block.
3. The Iframe: The iframe is wrapped in an .iframe-container class to prevent overflow issues and maintain the 670px height constraint.

Embedding Requirements

For the iframe integration to function correctly, ensure that the Supervised AI chatbot URL:

• Is served over HTTPS (to avoid mixed-content blocks).
• Does not have strict X-Frame-Options or Content-Security-Policy headers that prohibit embedding on your WordPress domain.
• Is configured for responsive viewing within a 400px wide container.