Core PHP Architecture

The wpai plugin is architected as a lightweight bridge between your WordPress site and the Supervised AI platform. It utilizes a hook-based system to register settings, enqueue necessary frontend assets, and provide a flexible shortcode interface for chatbot deployment.

Shortcode Implementation

The primary public interface for this plugin is the [supervised_ai_bot] shortcode. This allows users to embed specific chatbot instances into any page, post, or widget area.

Usage Example

[supervised_ai_bot id="1"]

Attributes

| Attribute | Type | Description | | :--- | :--- | :--- | | id | integer | The row number corresponding to the chatbot URL saved in the plugin settings. |

How it works

When the shortcode is processed, the PHP logic retrieves the list of URLs from the WordPress database, selects the URL corresponding to the provided ID, and renders the HTML structure required for the popup interface.

Asset Enqueuing

To ensure the chatbot interface functions correctly without interfering with your site's performance, the plugin selectively loads assets using the standard WordPress enqueuing system.

• Styles (custom-popup-style.css): Defines the appearance of the floating circle button and the iframe container. It uses high z-index values (up to 9999) to ensure the chat interface remains visible over other theme elements.
• Scripts (custom-popup-script.js): Handles the DOM manipulation required to toggle the visibility of the chat window when the user clicks the floating button.

Developer Note: Customizing Styles

If you need to override the default appearance, you can target the following CSS classes in your theme:

• .circle-button: The floating launcher icon.
• .popup-container: The main wrapper for the chatbot iframe.

Administration & Data Storage

The plugin provides a centralized administration interface to manage chatbot endpoints.

1. Storage logic: Chatbot URLs are stored as a single option in the wp_options table.
2. Parsing: The PHP core splits the textarea input by line breaks to map each URL to an ID.
3. Internal Helper (Data Retrieval): While internal, the function responsible for fetching these URLs ensures that inputs are sanitized and that the id attribute in the shortcode safely maps to a valid array index.

Frontend Execution Flow

1. Initialization: The plugin checks for the presence of the [supervised_ai_bot] shortcode on the current page.
2. Resource Loading: If the shortcode is present, the plugin enqueues the CSS and JS files.
3. HTML Injection: The plugin generates a hidden iframe-container containing the Supervised AI URL and a circle-button.
4. Interaction: The JavaScript togglePopup() function listens for clicks on the launcher button to switch the display state of the chatbot from none to block.