Project Architecture
Plugin Architecture Overview
The Supervised AI Bots plugin is built on a decoupled architecture that separates administrative configuration, front-end presentation, and interactive behavior. The system functions by capturing external AI chatbot URLs via a WordPress admin interface and rendering them within a secure, sandboxed environment on the front end.
System Components
The plugin is structured into three primary layers:
- Core Logic (PHP): Manages the WordPress lifecycle, including shortcode registration, settings persistence, and asset enqueuing.
- Presentation Layer (CSS): Defines the visual layout of the chatbot container, including its fixed positioning and responsive iframe scaling.
- Interaction Layer (JS): Manages the state of the chatbot UI (toggle/close events) without requiring page reloads.
File Organization
The following represents the key files within the plugin and their functional roles:
| File | Type | Role |
| :--- | :--- | :--- |
| supervised-ai-bots.php | PHP | Main entry point. Registers shortcodes and enqueues JS/CSS assets. |
| custom-popup-style.css | CSS | Controls the layout of the floating action button and the iframe popup. |
| custom-popup-script.js | JS | Handles the client-side logic for opening and closing the chatbot interface. |
Implementation Workflow
1. Configuration & Storage
The plugin provides a central settings page in the WordPress Admin. Chatbot URLs are stored as a list, where each line corresponds to an index (ID) used by the shortcode.
2. Shortcode Processing
The public interface is driven by the [supervised_ai_bot] shortcode. When the shortcode is processed, the plugin:
- Identifies the URL associated with the provided
id. - Generates a hidden
divcontainer (#popup) containing aniframe. - Injects the toggle button into the page footer.
Example Usage:
<!-- Display the first chatbot configured in settings -->
[supervised_ai_bot id="1"]
3. Frontend Execution
The UI relies on a Floating Action Button (FAB) pattern. The relationship between the visual components is governed by the following logic:
- Display Logic: The chatbot is loaded into an
.iframe-containerto ensure it maintains a consistent aspect ratio and remains isolated from the site's global styles. - State Management: The
togglePopup()function incustom-popup-script.jstriggers the visibility of the.popup-container.
// Internal logic for UI state
function togglePopup() {
var popup = document.getElementById('popup');
// Toggles visibility between 'none' and 'block'
}
Styling and Layout
The plugin uses a fixed-positioning strategy to ensure the chatbot is accessible regardless of page scroll.
- Z-Index Management: The chatbot container is set to
z-index: 1001and the toggle button toz-index: 9999to ensure they appear above standard theme elements. - Dimensions: The default interface is optimized for a width of
400pxand a height of670px, providing a mobile-app-like experience within the browser.
Data Flow Diagram
- Admin Input: User saves Bot URLs in WordPress Dashboard.
- Shortcode Call:
[supervised_ai_bot id="x"]is placed on a Page/Post. - PHP Rendering: Plugin retrieves URL
x, enqueuescustom-popup-style.cssandcustom-popup-script.js. - Client-Side: User clicks the
circle-button; JS reveals the iframe; AI bot loads directly from the Supervised AI source.