Plugin Architecture

Core Components Overview

The Supervised AI Bots plugin architecture is designed to be lightweight and non-intrusive, utilizing standard WordPress hooks to manage chatbot configurations and frontend rendering. The system is divided into three primary layers:

1. Admin Configuration Layer: Provides a centralized interface for managing chatbot source URLs.
2. Shortcode Processing Layer: Dynamically resolves bot IDs into functional frontend components.
3. Frontend Presentation Layer: A decoupled set of CSS and JavaScript assets that handle the popup behavior and iframe embedding.

Data Management & Settings

The plugin manages chatbot data through a simple, index-based storage system. Bot URLs are stored as a newline-delimited list within the WordPress database.

• Storage: Configuration is handled via the 'Supervised AI Bots' settings page.
• Indexing: The plugin assigns a numerical ID to each bot based on its line number in the settings textarea (starting at 1). This ID is the primary key used when calling the shortcode.

Shortcode Interface

The primary method for deploying a chatbot is via the [supervised_ai_bot] shortcode. This shortcode acts as the public API for the plugin's rendering logic.

Usage

[supervised_ai_bot id="1"]

Parameters

| Attribute | Type | Description | | :--- | :--- | :--- | | id | Integer | Required. The row number of the bot URL as defined in the plugin settings. |

When the shortcode is processed, the plugin retrieves the corresponding URL, generates a unique container, and prepares the iframe for the frontend popup.

Frontend Assets & Enqueueing

The plugin enqueues specific assets to handle the visual presentation and user interaction of the chatbot.

Styling (CSS)

The custom-popup-style.css file defines a fixed-position container at the bottom-right of the viewport. Key architectural styles include:

• .popup-container: A hidden-by-default container that houses the chatbot iframe.
• .circle-button: A floating action button (FAB) that triggers the visibility of the chatbot.
• .iframe-container: An optimized wrapper that ensures the Supervised AI chatbot scales correctly within the 400px x 670px frame.

Interaction (JavaScript)

Interactive elements are managed by custom-popup-script.js. This script exposes a public interface for controlling the bot's visibility:

• togglePopup(): Toggles the display state of the chatbot interface between block and none.
• closePopup(): Explicitly hides the chatbot interface.

Rendering Logic

1. Initialization: The plugin registers the shortcode and ensures assets are only loaded when required.
2. Execution: When a page contains the shortcode, the PHP backend parses the id attribute and fetches the mapped URL.
3. Output: The plugin injects a HTML structure containing:
   • A trigger button (.circle-button).
   • A popup container (.popup-container).
   • An <iframe> pointing to the Supervised AI source.
4. Client-Side Activation: The CSS handles the initial hidden state, and the JavaScript provides the toggle logic to reveal the bot to the visitor.