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 DENY or SAMEORIGIN. 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-src directive.

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:

1. User privacy is maintained across the two environments.
2. 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 with width: 100% relative to its container to aid responsiveness.
• Bot ID Mapping: Remember that the id attribute in the shortcode corresponds to the line number in the settings textarea.
  • Line 1 = id="1"
  • Line 2 = id="2"

[supervised_ai_bot id="1"]