Plugin Logic

Shortcode Architecture

The core functionality of the plugin is delivered through a WordPress shortcode. This allows users to programmatically inject chatbot interfaces into any post, page, or widget area.

[supervised_ai_bot]

This shortcode acts as the primary interface for rendering a specific chatbot. It processes the user-defined settings and generates the necessary HTML to display the bot container and trigger button.

Parameters:

• id (Required | Integer): The row number of the chatbot URL as defined in the plugin settings. For example, id="1" refers to the first URL entered in the settings textarea.

Example Usage:

<!-- Display the chatbot associated with the second URL in settings -->
[supervised_ai_bot id="2"]

Data Mapping and URL Parsing

The plugin logic processes the administrative settings to map shortcode IDs to specific bot endpoints.

1. Storage: Bot URLs are stored as a newline-delimited list in the WordPress database.
2. Parsing: When a shortcode is executed, the plugin retrieves the full list, splits it by line, and uses the id attribute as a 1-based index to select the target URL.
3. Validation: The plugin ensures the requested ID exists within the range of provided URLs before attempting to render the iframe.

Iframe Rendering and Encapsulation

The plugin handles the embedding of Supervised AI bots using a sandboxed <iframe> approach. This ensures that the chatbot's scripts and styles do not conflict with the parent WordPress theme.

The Popup Container

When a valid shortcode is processed, the plugin injects a hidden-by-default container (.popup-container) into the page. This container holds the iframe that loads the Supervised AI interface.

The Iframe Container

The iframe is wrapped in a responsive .iframe-container div. The logic ensures that:

• The iframe fills 100% of the width and height of its parent container.
• Border attributes are removed to provide a seamless "app-like" feel.
• The bot content is loaded lazily or upon interaction to optimize page performance.

Frontend Interaction Logic

The plugin utilizes a lightweight JavaScript controller to manage the chatbot's visibility without requiring page reloads.

Toggle Mechanism

The visibility of the chatbot is controlled by the togglePopup() function. This logic interacts with the DOM to switch the display state of the chatbot interface.

// Example of how the toggle logic handles the UI state
function togglePopup() {
    var popup = document.getElementById('popup');
    if (popup.style.display === 'block') {
        popup.style.display = 'none';
    } else {
        popup.style.display = 'block';
    }
}

Display Components

• Circle Button: A fixed-position floating action button (FAB) that triggers the togglePopup() function.
• Popup Body: A fixed-position window (defaulting to bottom-right) that displays the iframe content.
• Close Logic: Specific triggers within the UI call closePopup(), which explicitly sets the container's display style to none.

Styling and Layout Overrides

The plugin logic applies a specific CSS hierarchy to ensure the chatbot remains accessible regardless of the site's theme:

• Z-Index Management: The floating button and popup container are assigned high z-index values (9999 and 1001 respectively) to prevent them from being hidden behind theme elements like headers or sliders.
• Fixed Positioning: The interface is anchored to the viewport (bottom-right), ensuring the chatbot is always available as the user scrolls.
• Responsive Constraints: The popup is constrained to a maximum width (800px) and a set height (670px) to maintain usability across various screen resolutions.