Core Architecture
Architecture Overview
The Supervised AI Bots plugin utilizes a lightweight architecture designed to bridge WordPress backend configurations with a reactive frontend interface. The core logic follows a standard WordPress shortcode-to-asset injection pattern, ensuring that the heavy lifting (the AI interface) is offloaded to a secure iframe while the plugin manages the display state and styling.
Shortcode Implementation
The primary public interface for this plugin is the [supervised_ai_bot] shortcode. This serves as the hook that triggers the injection of the chatbot UI into specific pages or posts.
Usage:
[supervised_ai_bot id="1"]
id(Required): An integer representing the row index of the chatbot URL stored in the plugin settings. For example,id="1"fetches the first URL defined in the administration textarea.
Asset Registration and Enqueueing
To maintain performance, the plugin conditionally enqueues the necessary frontend assets only when the shortcode is detected.
- Styles (
custom-popup-style.css): Handles the positioning of the floating action button (FAB) and the fixed-position popup container. It ensures the chatbot remains visible at the bottom-right of the viewport (z-index: 1001). - Scripts (
custom-popup-script.js): Manages the DOM-level visibility of the chatbot interface. It exposes global functions used to toggle the UI state.
Iframe Injection Mechanism
The architecture uses a "Shadow Container" approach. Instead of loading the chatbot content directly into the WordPress DOM, the plugin generates an iframe-based wrapper. This ensures:
- CSS Isolation: No style leakage between the chatbot and your WordPress theme.
- Security: The Supervised AI interface runs in its own origin.
- Performance: The parent page remains responsive while the iframe loads the AI assets.
DOM Structure
When the shortcode is processed, the following structure is injected into the footer:
<!-- Trigger Button -->
<div class="circle-button" onclick="togglePopup()">...</div>
<!-- Chatbot Container -->
<div id="popup" class="popup-container">
<div class="popup-body">
<div class="iframe-container">
<iframe src="YOUR_SUPERVISED_AI_URL" ...></iframe>
</div>
</div>
</div>
Public JavaScript API
While the plugin handles most interactions automatically, the following functions are available globally for custom integrations or manual triggers:
| Function | Description |
| :--- | :--- |
| togglePopup() | Reverses the current display state of the chatbot (switches between block and none). |
| closePopup() | Explicitly hides the chatbot interface. |
Configuration Mapping
The backend settings page acts as a simple key-value store where each line in the configuration textarea is mapped to an internal index.
- Input: A list of URLs in the Admin Dashboard.
- Processing: The PHP backend parses the list into an array.
- Resolution: When
id="X"is called, the plugin retrievesarray[X-1]and injects it as thesrcattribute of the frontend iframe.