Core Architecture

Core Architecture

The Supervised AI Bots plugin follows a standard WordPress modular architecture, decoupling administrative configuration from the frontend presentation. The system is built on a three-tier interaction model: PHP for data management and shortcode rendering, CSS for layout positioning, and JavaScript for client-side state transitions.

1. Integration Model (Shortcode API)

The primary interface for deploying chatbots is the WordPress Shortcode API. The plugin exposes a single shortcode that serves as the bridge between the stored administrative settings and the frontend display.

Usage:

[supervised_ai_bot id="N"]

• id (Required): An integer representing the row number of the chatbot URL configured in the plugin settings page. For example, id="1" refers to the first URL provided in the settings.

When a shortcode is processed, the PHP backend retrieves the corresponding URL, generates a unique container ID, and enqueues the necessary frontend assets.

2. Frontend Components

The chatbot interface is composed of three structural elements injected into the DOM at the shortcode location:

• The Trigger (Circle Button): A floating action button (FAB) that remains fixed to the viewport.
• The Container (Popup): A fixed-position modal that houses the chatbot interface.
• The Content (Iframe): An isolated environment that loads the Supervised AI interface via the URL specified in the settings.

3. Interaction Logic (JS & CSS)

The plugin utilizes a lightweight event-driven model to manage the visibility of the chatbot without refreshing the page.

Event Handling

The interaction is governed by a global JavaScript controller that manages the display state of the popup. While these functions are internal to the plugin's operation, they dictate the user experience:

| Function | Action | | :--- | :--- | | togglePopup() | Switches the display property of the chatbot container between block and none. | | closePopup() | Explicitly hides the chatbot container. |

Presentation Layer

The layout is controlled via a dedicated stylesheet that ensures the chatbot remains accessible regardless of page scroll depth.

• Positioning: The chatbot and its trigger are fixed to the bottom: 20px and right: 20px coordinates.
• Dimensions: The default chatbot container is optimized for modern web layouts with a height of 670px and a maximum width of 800px.
• Z-Indexing: The components use high z-index values (9999 for the button and 1001 for the container) to ensure the chatbot remains above other theme elements.

4. Data Flow Overview

1. Configuration: The user inputs chatbot URLs into a textarea in the WordPress Admin dashboard (stored as a plugin option).
2. Request: A visitor accesses a page containing the [supervised_ai_bot] shortcode.
3. Rendering:
   • PHP validates the id attribute and maps it to the stored URL.
   • The system enqueues custom-popup-style.css and custom-popup-script.js.
   • The HTML structure (Trigger + Hidden Container + Iframe) is rendered into the page source.
4. Activation: The user clicks the .circle-button, triggering the JS controller to reveal the .popup-container via a CSS display state change.