Source Code Overview

File Architecture

The wpai plugin is structured to separate presentation logic, interactivity, and WordPress core integration. Below is an overview of the primary components:

| File | Type | Description | | :--- | :--- | :--- | | supervised-ai-bots.php | PHP | The main plugin entry point. Handles admin settings, shortcode registration, and script enqueuing. | | custom-popup-script.js | JavaScript | Manages the frontend UI behavior, specifically the opening and closing of the chatbot popup. | | custom-popup-style.css | CSS | Defines the visual layout, positioning, and responsiveness of the chatbot interface. |

Frontend Components

Stylesheet (custom-popup-style.css)

The plugin uses a fixed-position layout to ensure the chatbot is accessible from any part of the page. Key CSS classes available for UI customization include:

• .circle-button: The floating action button (FAB) used to trigger the chatbot. By default, it is anchored to the bottom-right.
• .popup-container: The main wrapper for the chatbot iframe.
• .iframe-container: Ensures the Supervised AI interface scales correctly within the popup dimensions.

Default Dimensions:

• Popup Height: 670px
• Popup Width: 400px (Max-width 800px)

Interactive Script (custom-popup-script.js)

The JavaScript component manages the state of the chatbot interface. It provides two primary functions that interact with the DOM:

| Function | Role | | :--- | :--- | | togglePopup() | Switches the visibility of the #popup element between block and none. | | closePopup() | Explicitly sets the #popup element to display: none. |

Public Interface & Usage

Shortcode Integration

The primary way to interact with the plugin's functionality on the frontend is via the WordPress Shortcode API.

Shortcode: [supervised_ai_bot]

Attributes

| Attribute | Type | Required | Description | | :--- | :--- | :--- | :--- | | id | Integer | Yes | The row number of the chatbot URL saved in the plugin settings (starting from 1). |

Usage Example

To embed a specific chatbot configured in the first line of your settings:

[supervised_ai_bot id="1"]

Admin Configuration

The backend interface allows users to input multiple Supervised AI chatbot URLs.

• Storage: URLs are stored as a newline-separated list.
• Mapping: The id attribute in the shortcode maps directly to the line number of the URL in the settings textarea.

Internal Logic Overview

While the internal PHP logic handles the heavy lifting of WordPress integration, it follows these standard procedures:

1. Enqueuing Assets: The plugin automatically loads custom-popup-style.css and custom-popup-script.js only when the shortcode is present or on configured pages.
2. Iframe Injection: The shortcode handler retrieves the URL associated with the provided id and injects it into a secure <iframe> within the .iframe-container HTML structure.