File Structure

Directory Structure

The wpai plugin follows a standard WordPress plugin architecture, separating logic, presentation, and behavior into distinct files.

supervised-ai-bots/
├── custom-popup-script.js  # Frontend popup behavior
├── custom-popup-style.css   # Visual styles for the chatbot UI
├── README.md               # Plugin documentation and metadata
└── [main-plugin-file].php  # Core logic, hooks, and shortcode registration

File Details

Core Logic (PHP)

While the primary logic is handled within the main PHP file, its primary responsibility is to bridge the WordPress environment with the Supervised AI service.

• Shortcode Integration: Registers the [supervised_ai_bot] shortcode.
• Asset Enqueueing: Dynamically loads custom-popup-script.js and custom-popup-style.css only when the shortcode is present or as part of the footer logic.
• Admin Interface: Provides the settings page to input and store chatbot URLs.

JavaScript (custom-popup-script.js)

This file manages the client-side interactivity of the chatbot interface. It is responsible for the transition between the collapsed "launcher" state and the expanded "chat" state.

Key Functions (Internal):

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

Stylesheets (custom-popup-style.css)

This file defines the look and feel of the chatbot overlay. Users wishing to customize the appearance of the bot (e.g., changing the button color or position) should target these CSS classes in their theme's "Additional CSS" section.

Key Selectors for Customization:

• .popup-container: Controls the dimensions and positioning of the chat window (Default: fixed, bottom-right).
• .circle-button: Styles the floating action button (launcher) used to open the chat (Default: Blue, 60x60px).
• .iframe-container: Manages the scaling and display of the Supervised AI iframe.

Public Interface & Usage

The plugin exposes functionality primarily through a WordPress shortcode. This allows you to inject specific bots into any post, page, or widget area.

Shortcode Syntax

[supervised_ai_bot id="X"]

| Attribute | Type | Description | | :--- | :--- | :--- | | id | Integer | The row number of the URL entered in the plugin settings (e.g., 1 for the first URL). |

Example Implementation

To display the first chatbot configured in your settings:

1. Navigate to your WordPress Page/Post editor.
2. Insert a Shortcode block.
3. Add the following:

[supervised_ai_bot id="1"]

Visual Components

When the shortcode is rendered, the following UI elements are injected into the page:

1. The Launcher: A circular floating button (typically at the bottom-right).
2. The Popup: A hidden-by-default container that holds an <iframe> pointing to your Supervised AI instance.
3. The Iframe: The actual chat interface served directly from Supervised AI.