Technical Architecture

Overview

The Supervised AI Bots plugin is built on a modular architecture that integrates WordPress backend configuration with a lightweight frontend presentation layer. The plugin operates by mapping user-defined URLs to specific shortcode IDs, which then render a responsive iframe-based chat interface.

The architecture is divided into three primary layers:

1. Configuration Layer (PHP): Handles the administration settings, data persistence of bot URLs, and shortcode parsing.
2. Presentation Layer (CSS): Manages the visual state of the chatbot container, positioning it as a fixed overlay on the site.
3. Interaction Layer (JS): Manages client-side event triggers to toggle the visibility of the chat interface.

File Structure

The plugin follows a standard WordPress directory structure to ensure compatibility and ease of asset management:

supervised-ai-bots/
├── wpai.php                   # Main plugin file (Shortcode & Admin logic)
├── custom-popup-script.js     # Client-side toggle logic
└── custom-popup-style.css     # UI styling and positioning

Relationship Map

• PHP to CSS/JS: The plugin enqueues custom-popup-style.css and custom-popup-script.js only when the shortcode is detected or globally depending on configuration, ensuring minimal impact on site performance.
• PHP to HTML: The PHP logic retrieves the URL from the settings database based on the provided id and injects it into a pre-defined HTML template containing the iframe.
• JS to HTML: The JavaScript targets specific DOM elements (#popup) generated by the PHP shortcode to manipulate their display properties.

Shortcode Implementation

The primary public interface for this plugin is the [supervised_ai_bot] shortcode.

Usage

[supervised_ai_bot id="1"]

Parameters

| Attribute | Type | Description | | :--- | :--- | :--- | | id | Integer | The row number of the URL saved in the plugin settings (starting from 1). |

Execution Flow

1. Lookup: The plugin parses the id attribute and retrieves the corresponding URL from the "Supervised AI Bots" settings page.
2. Markup Generation: It generates a <div> container (.popup-container) and a floating trigger button (.circle-button).
3. Iframe Injection: The specific Bot URL is injected as the src attribute of an iframe within the container.

Front-end Components

Client-Side Logic (custom-popup-script.js)

The interaction layer is handled by two primary internal functions that manage the state of the chatbot UI.

| Function | Scope | Description | | :--- | :--- | :--- | | togglePopup() | Internal | Switches the #popup element between display: block and display: none. Triggered by the circle button. | | closePopup() | Internal | Forces the #popup element to display: none. |

UI Styling (custom-popup-style.css)

The styling layer ensures the chatbot interface remains accessible regardless of page content.

• Positioning: The chatbot trigger and container are set to position: fixed, anchoring them to the bottom-right corner (bottom: 20px; right: 20px;).
• Z-Indexing: The components use high z-index values (1001 and 9999) to ensure they float above other theme elements.
• Dimensions: The default popup height is fixed at 670px with a maximum width of 800px to maintain iframe aspect ratios.

Data Flow Diagram

1. Admin Input: User enters URLs into the plugin settings (stored as an array or newline-separated string).
2. Request: A visitor loads a page containing [supervised_ai_bot id="2"].
3. Processing:
   • PHP extracts the 2nd URL from the settings.
   • PHP enqueues the required .css and .js files.
   • PHP returns the HTML structure to the browser.
4. Interaction:
   • User clicks the .circle-button.
   • togglePopup() is executed.
   • The iframe loads the Supervised AI interface from the remote source.