Architecture Overview

The Supervised AI Bots plugin is designed as a lightweight integration layer between WordPress and the Supervised AI platform. It utilizes a modular approach, combining WordPress server-side logic (PHP) with a client-side presentation layer (JavaScript/CSS) to render chatbots as interactive overlays.

Component Interaction Overview

The plugin follows a standard WordPress plugin lifecycle: data is captured via the Admin interface, stored in the WordPress database, and rendered on the frontend via a shortcode-driven injection mechanism.

1. Administrative Configuration

The plugin provides a centralized settings page within the WordPress dashboard.

• Data Storage: Chatbot URLs are stored as a newline-delimited list.
• Mapping: Each URL is indexed based on its row position (starting from 1). This index serves as the id used in the shortcode.

2. Frontend Rendering (Shortcode Engine)

The core functionality is triggered by the [supervised_ai_bot] shortcode. When WordPress parses this tag:

• ID Resolution: The plugin retrieves the URL corresponding to the provided id attribute.
• Asset Enqueueing: The plugin dynamically enqueues the custom-popup-style.css and custom-popup-script.js files only when the shortcode is present, ensuring optimal page performance.
• DOM Injection: The plugin injects a hidden popup container and a floating trigger button into the page's HTML.

3. Client-Side Presentation Layer

The frontend experience is managed by a combination of CSS positioning and JavaScript event handling.

Styling (custom-popup-style.css)

The UI is built using a fixed-positioning strategy to ensure the chatbot remains accessible regardless of page scroll:

• .popup-container: A fixed container (position: fixed) positioned at the bottom-right. It wraps an iframe that loads the chatbot URL.
• .circle-button: A high-index floating action button (FAB) that acts as the primary toggle.
• .iframe-container: A responsive wrapper that ensures the Supervised AI iframe occupies 100% of the popup's dimensions.

Interaction (custom-popup-script.js)

The JavaScript layer manages the state of the chatbot interface without requiring page reloads:

• togglePopup(): Manages the display property of the chatbot container, switching between block and none.
• closePopup(): Explicitly hides the chatbot interface.

Data Flow Diagram

1. Input: Admin enters Bot URLs in Settings.
2. Processing: WordPress stores URLs in the wp_options table.
3. Request: User visits a page containing [supervised_ai_bot id="1"].
4. Execution:
   • PHP retrieves URL #1.
   • HTML generates a <div> containing an <iframe> pointing to that URL.
   • JS/CSS are loaded to handle the "popup" behavior.
5. Output: An interactive floating chatbot appears on the site's frontend.

Technical Specifications

| Component | Responsibility | | :--- | :--- | | Shortcode | [supervised_ai_bot id="n"] | | Logic Hook | add_shortcode for rendering; admin_menu for settings. | | Frontend Assets | custom-popup-script.js, custom-popup-style.css | | Dependencies | None (Vanilla JS and Standard WordPress API) | | Rendering | Iframe-based sandbox for secure bot execution. |

Implementation Example

To render a bot registered on the second line of your settings:

<!-- Input in WordPress Editor -->
[supervised_ai_bot id="2"]

<!-- Resulting DOM Structure (Simplified) -->
<div id="popup" class="popup-container">
    <div class="iframe-container">
        <iframe src="https://supervised.co/your-bot-url"></iframe>
    </div>
</div>
<div class="circle-button" onclick="togglePopup()">+</div>