Iframe Security & Mechanics
Iframe Mechanics
The Supervised AI Bots plugin utilizes HTML <iframe> elements to embed AI chat interfaces into your WordPress site. This approach ensures that the chatbot's logic and processing remain isolated from your website's primary resources, preventing script conflicts and preserving page load performance.
How the Embedding Works
When you use the [supervised_ai_bot id="X"] shortcode, the plugin generates a floating popup container. Inside this container, an iframe is rendered using the URL provided in your plugin settings.
- Persistent Loading: The iframe is loaded into the DOM when the page initializes but remains hidden until the user clicks the floating action button.
- Display Toggle: The
togglePopup()function controls the visibility of the iframe container without refreshing the iframe content, allowing chat sessions to persist as users navigate or interact with the page.
Default Dimensions
The iframe is contained within a fixed-position popup designed for optimal chat interaction. The default styles are as follows:
| Property | Default Value | | :--- | :--- | | Width | 400px (Max-width: 800px) | | Height | 670px | | Position | Fixed (Bottom-Right) | | Z-Index | 1001 (Overlays standard page content) |
/* Example: Customizing the iframe height via your theme's CSS */
.popup-container, .iframe-container {
height: 500px; /* Adjust height to fit your design */
}
Security & Cross-Origin Considerations
Because the chatbot is served through an iframe, several security protocols must be observed to ensure the bot displays correctly and remains secure.
Cross-Origin Resource Sharing (CORS) & X-Frame-Options
For the chatbot to appear, the source URL (the Supervised AI bot URL) must permit embedding via your WordPress site's domain.
- X-Frame-Options: The AI bot server must not be set to
DENYorSAMEORIGIN. It must allow your domain as a valid frame ancestor. - Content Security Policy (CSP): If your WordPress site uses strict CSP headers, you must whitelist the Supervised AI domain in your
frame-srcdirective.
SSL/HTTPS Requirements
To maintain a secure environment for your users, the plugin requires both your WordPress site and the AI bot URL to be served over HTTPS.
- Browsers will block "Mixed Content" (loading an HTTP iframe on an HTTPS site).
- Secure iframes ensure that data transmitted between the visitor and the AI bot is encrypted.
Sandbox Isolation
The iframe acts as a security sandbox. The AI bot does not have access to the host site's cookies, session data, or local storage unless explicitly configured via the Supervised AI platform. This ensures that:
- User privacy is maintained across the two environments.
- Malicious scripts (if any) cannot jump from the iframe to the parent WordPress site.
Best Practices for Users
- URL Validation: Ensure the URLs entered in the settings page are absolute (e.g.,
https://supervised.co/bot/example). - Responsive Testing: While the plugin sets a default width of
400px, verify the appearance on mobile devices. The iframe is styled withwidth: 100%relative to its container to aid responsiveness. - Bot ID Mapping: Remember that the
idattribute in the shortcode corresponds to the line number in the settings textarea.- Line 1 =
id="1" - Line 2 =
id="2"
- Line 1 =
[supervised_ai_bot id="1"]