Plugin File Architecture

Directory Overview

The Supervised AI Bots plugin is organized to separate WordPress administration logic from the front-end presentation layer. Below is the standard file structure within the /wp-content/plugins/supervised-ai-bots/ directory:

supervised-ai-bots/
├── supervised-ai-bots.php      # Main plugin entry point and logic
├── custom-popup-script.js      # Front-end interaction logic
├── custom-popup-style.css      # Chatbot UI and layout styles
└── readme.txt                  # WordPress repository metadata

Core Components

1. Main Plugin Logic (supervised-ai-bots.php)

This file serves as the primary interface between WordPress and the Supervised AI service. It handles the following public-facing responsibilities:

• Settings Registration: Provides the administration interface where users input chatbot URLs.
• Shortcode Processing: Orchestrates the rendering of chatbots via the [supervised_ai_bot] shortcode.
• Asset Enqueuing: Automatically loads the necessary CSS and JavaScript files only when the chatbot is required on a page.

2. Interaction Layer (custom-popup-script.js)

This script manages the lifecycle of the chatbot popup on the visitor's browser. While largely automated, it controls the visibility state of the iframe container.

Public Functions:

• togglePopup(): Switches the chatbot interface between visible and hidden states.
• closePopup(): Explicitly hides the chatbot interface.

3. Presentation Layer (custom-popup-style.css)

This stylesheet defines the visual identity of the chatbot container and the floating launch button. It uses a fixed-position layout to ensure the bot remains accessible as users scroll.

Key Layout Specifications:

• Container Dimensions: Defaulted to 400px width and 670px height.
• Z-Index Management: The chatbot is set to z-index: 1001 and the launch button to z-index: 9999 to ensure they appear above standard theme elements.
• Responsive Positioning: Fixed to the bottom-right corner (20px offset).

Integration Interface

The plugin interacts with your WordPress content primarily through a shortcode. This is the "Public API" for displaying specific bots.

Shortcode Usage

The [supervised_ai_bot] shortcode accepts a single attribute to identify which bot to render based on the order defined in your settings.

| Attribute | Type | Description | | :--- | :--- | :--- | | id | Integer | The row number of the URL entered in the plugin settings (starting at 1). |

Example: To display the first chatbot configured in your settings, insert the following into any post or page:

[supervised_ai_bot id="1"]

Execution Flow

1. Initialization: Upon page load, WordPress checks for the presence of the [supervised_ai_bot] shortcode.
2. Asset Loading: If the shortcode is detected, the plugin injects custom-popup-style.css and custom-popup-script.js into the page header/footer.
3. Iframe Generation: The plugin retrieves the URL corresponding to the provided id and generates a hidden <iframe> container.
4. User Trigger: When a visitor clicks the floating action button (the .circle-button defined in the CSS), togglePopup() is triggered, revealing the Supervised AI interface.