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.jsandcustom-popup-style.cssonly 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 betweenblockandnone.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:
- Navigate to your WordPress Page/Post editor.
- Insert a Shortcode block.
- Add the following:
[supervised_ai_bot id="1"]
Visual Components
When the shortcode is rendered, the following UI elements are injected into the page:
- The Launcher: A circular floating button (typically at the bottom-right).
- The Popup: A hidden-by-default container that holds an
<iframe>pointing to your Supervised AI instance. - The Iframe: The actual chat interface served directly from Supervised AI.