Core Plugin Architecture

Overview

The Supervised AI Bots plugin is built on the standard WordPress Plugin API, utilizing a modular approach to separate administrative logic, frontend presentation, and asset management. The architecture is designed to be lightweight, relying on an iframe-based delivery system to ensure chatbot compatibility and performance without bloating the host site's database.

File Structure

The plugin follows a flat organizational structure for its core assets, ensuring easy discoverability and maintenance.

| File | Purpose | | :--- | :--- | | supervised-ai-bots.php | The main entry point. Handles plugin headers, hook registration, and initialization logic. | | custom-popup-script.js | Manages the frontend interactive state, including popup triggers and visibility toggling. | | custom-popup-style.css | Defines the visual presentation of the floating chat bubble and the iframe container. | | README.md | Provides installation, usage instructions, and version history. |

PHP Hook System

The plugin integrates with WordPress through several core action and filter hooks. These hooks ensure that resources are only loaded when necessary.

1. Asset Enqueuing

The plugin utilizes the wp_enqueue_scripts hook to register and load the JavaScript and CSS components. To maintain performance, these assets are typically enqueued only when the chatbot shortcode is detected or globally if the "all-pages" configuration is active.

2. Shortcode Interface

The core functionality is exposed via the [supervised_ai_bot] shortcode. This is handled by the add_shortcode WordPress function, which:

• Parses the id attribute.
• Retrieves the corresponding URL from the plugin settings.
• Returns an iframe-wrapped container styled by custom-popup-style.css.

Usage Example:

[supervised_ai_bot id="1"]

3. Admin Administration

The administration interface is injected into the WordPress Dashboard via the admin_menu hook. Settings are persisted in the wp_options table, storing the bot URLs as a serialized string or a newline-delimited block of text.

Frontend Architecture

The frontend implementation relies on a "floating widget" pattern. It consists of three primary components:

Interactive State Management

The custom-popup-script.js file manages the DOM state. It uses simple visibility toggles to show or hide the chat interface without requiring a page reload.

// Core visibility functions
togglePopup(); // Switches between block and none display
closePopup();  // Explicitly hides the widget

Presentation Layer

The custom-popup-style.css file defines the layout of the chat interface. It uses a fixed position container to ensure the bot remains accessible as the user scrolls.

• Z-Index Management: The widget is set to z-index: 9999 to ensure it remains above other theme elements.
• Responsive Scaling: The iframe container is constrained to a max-width: 800px to maintain usability across desktop and tablet viewports.

Iframe Delivery

Bots are rendered within an iframe-container. This architecture isolates the Supervised AI chatbot environment from the WordPress theme's CSS, preventing styling conflicts and ensuring that the bot's internal logic remains encapsulated.

Data Workflow

1. Input: The administrator enters bot URLs in the settings page.
2. Storage: URLs are stored in the WordPress database, indexed by line number (ID).
3. Execution: When a page containing the shortcode is requested, the plugin retrieves the URL for the specified ID.
4. Rendering: The plugin outputs the HTML structure (the circle button and the hidden popup container) and initializes the iframe with the source URL.