Plugin File Architecture
Directory Overview
The Supervised AI Bots plugin is organized to separate WordPress administration logic from the front-end presentation layer. Below is the standard file structure within the /wp-content/plugins/supervised-ai-bots/ directory:
supervised-ai-bots/
├── supervised-ai-bots.php # Main plugin entry point and logic
├── custom-popup-script.js # Front-end interaction logic
├── custom-popup-style.css # Chatbot UI and layout styles
└── readme.txt # WordPress repository metadata
Core Components
1. Main Plugin Logic (supervised-ai-bots.php)
This file serves as the primary interface between WordPress and the Supervised AI service. It handles the following public-facing responsibilities:
- Settings Registration: Provides the administration interface where users input chatbot URLs.
- Shortcode Processing: Orchestrates the rendering of chatbots via the
[supervised_ai_bot]shortcode. - Asset Enqueuing: Automatically loads the necessary CSS and JavaScript files only when the chatbot is required on a page.
2. Interaction Layer (custom-popup-script.js)
This script manages the lifecycle of the chatbot popup on the visitor's browser. While largely automated, it controls the visibility state of the iframe container.
Public Functions:
togglePopup(): Switches the chatbot interface between visible and hidden states.closePopup(): Explicitly hides the chatbot interface.
3. Presentation Layer (custom-popup-style.css)
This stylesheet defines the visual identity of the chatbot container and the floating launch button. It uses a fixed-position layout to ensure the bot remains accessible as users scroll.
Key Layout Specifications:
- Container Dimensions: Defaulted to
400pxwidth and670pxheight. - Z-Index Management: The chatbot is set to
z-index: 1001and the launch button toz-index: 9999to ensure they appear above standard theme elements. - Responsive Positioning: Fixed to the bottom-right corner (
20pxoffset).
Integration Interface
The plugin interacts with your WordPress content primarily through a shortcode. This is the "Public API" for displaying specific bots.
Shortcode Usage
The [supervised_ai_bot] shortcode accepts a single attribute to identify which bot to render based on the order defined in your settings.
| Attribute | Type | Description |
| :--- | :--- | :--- |
| id | Integer | The row number of the URL entered in the plugin settings (starting at 1). |
Example: To display the first chatbot configured in your settings, insert the following into any post or page:
[supervised_ai_bot id="1"]
Execution Flow
- Initialization: Upon page load, WordPress checks for the presence of the
[supervised_ai_bot]shortcode. - Asset Loading: If the shortcode is detected, the plugin injects
custom-popup-style.cssandcustom-popup-script.jsinto the page header/footer. - Iframe Generation: The plugin retrieves the URL corresponding to the provided
idand generates a hidden<iframe>container. - User Trigger: When a visitor clicks the floating action button (the
.circle-buttondefined in the CSS),togglePopup()is triggered, revealing the Supervised AI interface.