Iframe Integration

Iframe Integration Overview

The Supervised AI Bots plugin utilizes a secure iframe-based architecture to embed external chatbot interfaces directly onto your WordPress site. This approach ensures that the chatbot remains isolated from your site’s core code, preventing CSS conflicts and enhancing security.

How the Integration Works

When you add a chatbot URL in the plugin settings and use the [supervised_ai_bot] shortcode, the plugin generates a specialized container on the frontend. This container consists of a floating action button (trigger) and a hidden iframe window that loads your Supervised AI URL only when requested.

Security and Isolation

The chatbot is rendered within a secure iframe container. This provides two primary benefits:

1. Script Isolation: The chatbot's logic and your WordPress site's scripts operate in separate environments, reducing the risk of cross-scripting issues.
2. Style Protection: The iframe prevents the chatbot's styling from "leaking" into your website and ensures your WordPress theme does not inadvertently alter the chatbot's UI.

Technical Specifications

By default, the iframe integration uses the following display parameters:

| Property | Default Value | Description | | :--- | :--- | :--- | | Width | 400px | The width of the chatbot popup window. | | Height | 670px | The vertical space allocated for the chatbot interface. | | Position | Fixed (Bottom-Right) | The bot remains anchored to the bottom-right corner of the viewport. | | Z-Index | 9999 | Ensures the chatbot button and window appear above other site elements. |

Usage Example

To integrate a specific bot via iframe, identify its row number in the Supervised AI Bots settings page and use the shortcode in any page or post editor:

<!-- Displays the chatbot URL found on the first line of your settings -->
[supervised_ai_bot id="1"]

<!-- Displays the chatbot URL found on the second line of your settings -->
[supervised_ai_bot id="2"]

Rendering Behavior

1. Trigger: A circular floating button appears in the bottom-right corner of the page.
2. Toggle: Clicking the button executes the internal togglePopup() function, which alternates the iframe container's visibility between display: none and display: block.
3. Loading: The iframe loads the content of the Supervised AI URL immediately upon page initialization to ensure the chat is ready as soon as the user opens the popup.