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:
- Configuration Layer (PHP): Handles the administration settings, data persistence of bot URLs, and shortcode parsing.
- Presentation Layer (CSS): Manages the visual state of the chatbot container, positioning it as a fixed overlay on the site.
- 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.cssandcustom-popup-script.jsonly 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
idand 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
- Lookup: The plugin parses the
idattribute and retrieves the corresponding URL from the "Supervised AI Bots" settings page. - Markup Generation: It generates a
<div>container (.popup-container) and a floating trigger button (.circle-button). - Iframe Injection: The specific Bot URL is injected as the
srcattribute 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 (
1001and9999) to ensure they float above other theme elements. - Dimensions: The default popup height is fixed at
670pxwith a maximum width of800pxto maintain iframe aspect ratios.
Data Flow Diagram
- Admin Input: User enters URLs into the plugin settings (stored as an array or newline-separated string).
- Request: A visitor loads a page containing
[supervised_ai_bot id="2"]. - Processing:
- PHP extracts the 2nd URL from the settings.
- PHP enqueues the required
.cssand.jsfiles. - PHP returns the HTML structure to the browser.
- Interaction:
- User clicks the
.circle-button. togglePopup()is executed.- The iframe loads the Supervised AI interface from the remote source.
- User clicks the