System Architecture

Architectural Overview

The Supervised AI Bots plugin (wpai) is designed as a lightweight bridge between the WordPress ecosystem and the Supervised AI platform. The architecture follows a standard WordPress plugin pattern, utilizing a decoupled front-end delivery model. Instead of hosting the AI logic locally, the plugin acts as a secure container that renders remote chatbot instances via an iframe-based delivery system.

The system is composed of three primary layers:

1. Configuration Layer (PHP/Admin): Manages bot metadata and settings.
2. Logic & Presentation Layer (JS/CSS): Controls the interactive popup behavior and visual styling.
3. Execution Layer (Shortcode/Iframe): Injects the bot into specific pages or posts.

Core Components

1. Admin Settings & Data Persistence

The plugin provides a centralized administration interface within the WordPress Dashboard.

• Data Storage: Bot URLs are stored as a newline-delimited list in the WordPress wp_options table.
• Indexing: The system assigns a 1-based index (ID) to each URL based on its row position, which is used by the shortcode to retrieve the correct bot configuration at runtime.

2. The Shortcode Interface

The primary public interface for the plugin is the [supervised_ai_bot] shortcode. This interface handles the logic of mapping a user-defined ID to a specific Supervised AI URL.

Usage Example:

[supervised_ai_bot id="1"]

When the shortcode is processed, the system validates the ID, retrieves the corresponding URL, and enqueues the necessary assets to initialize the chatbot UI.

3. Frontend Execution & Asset Enqueueing

The plugin utilizes standard WordPress hooks (wp_enqueue_scripts) to load its frontend assets only when required.

• custom-popup-script.js: Manages the DOM state, specifically the toggling of the chatbot window. It handles the togglePopup() and closePopup() triggers.
• custom-popup-style.css: Defines the layout for the fixed-position "floating" container, the circular trigger button, and the iframe responsive wrapper.

Iframe-Based Delivery Model

The architecture utilizes an iframe-based sandbox to embed the Supervised AI interface. This approach provides several technical advantages:

• Security Isolation: The chatbot script runs in a separate context from the main WordPress site, preventing CSS or JS conflicts between the site's theme and the AI interface.
• Resource Efficiency: Since the AI engine is hosted on Supervised AI servers, the plugin imposes minimal load on the WordPress host server.
• Real-time Updates: Changes made to the bot's logic or training on the Supervised AI platform are reflected immediately on the WordPress site without requiring plugin updates.

Component Interaction Flow

1. Request: A visitor loads a page containing the [supervised_ai_bot] shortcode.
2. Resolution: The PHP backend identifies the requested URL ID and generates the HTML structure for a hidden popup container.
3. Injection: An iframe is rendered inside the .iframe-container, pointing to the specific Supervised AI endpoint.
4. Interaction: The user clicks the .circle-button (floating action button), which triggers the JavaScript togglePopup() function, making the chatbot visible to the user.

Technical Specifications

| Component | Technology | Role | | :--- | :--- | :--- | | Backend | PHP (WordPress API) | Shortcode registration, Settings API, and Data management. | | Frontend Logic | JavaScript (Vanilla) | UI state management (Open/Close actions). | | Styling | CSS3 | Responsive fixed positioning and Z-index management. | | External Link | Iframe | Sandbox for the Supervised AI conversational interface. |