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.
- The Trigger: A circular floating action button (FAB) is rendered at the bottom-right of the viewport.
- The Action: Clicking the button invokes the
togglePopup()function, which switches the display state of the.popup-containerbetweennoneandblock. - The Iframe: The iframe is wrapped in an
.iframe-containerclass 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-OptionsorContent-Security-Policyheaders that prohibit embedding on your WordPress domain. - Is configured for responsive viewing within a 400px wide container.