File Organization

Directory Structure

The Supervised AI Bots plugin follows a standard WordPress plugin architecture. Below is the organization of the primary files required for the plugin to function:

wpai/
├── supervised-ai-bots.php    # Main plugin entry point and logic
├── custom-popup-script.js    # Client-side interaction logic
├── custom-popup-style.css    # UI styling and layout
└── README.md                 # Plugin documentation and setup guide

File Responsibilities

Core Plugin File (supervised-ai-bots.php)

This is the primary PHP file that WordPress loads. It handles the administrative backend and the registration of the shortcode.

• Public Interface: Registers the [supervised_ai_bot] shortcode.
• Settings Management: Processes the URLs saved in the "Supervised AI Bots" settings page.
• Enqueuing: Responsible for loading the required CSS and JS files on the front end only when the chatbot is active.

Frontend Styles (custom-popup-style.css)

This stylesheet controls the visual presentation of the chatbot interface. It is designed to be non-intrusive, positioning the bot in the bottom-right corner of the screen.

• Key Selectors:
  • .circle-button: Styles the floating launcher button.
  • .popup-container: Defines the dimensions and positioning of the chat window.
  • .iframe-container: Manages the responsiveness of the embedded Supervised AI bot.
• Customization: Users can override these classes in their theme’s "Additional CSS" section to change the launcher's background color or the popup's height.

Frontend Logic (custom-popup-script.js)

This script manages the user's interaction with the chatbot widget on the live site.

• Public Functions:
  • togglePopup(): Switches the visibility of the chatbot between 'block' and 'none'.
  • closePopup(): Explicitly hides the chatbot window.
• Usage: These functions are triggered by clicking the floating launcher button or the close interface within the widget.

Shortcode Reference

The plugin provides a single shortcode to display your configured bots. The behavior of the file organization ensures that assets are only loaded when this shortcode is present or configured to appear.

[supervised_ai_bot]

| Attribute | Type | Description | | :--- | :--- | :--- | | id | Integer | The row number of the URL saved in the plugin settings (starting from 1). |

Example Usage: To display the first chatbot URL configured in your settings:

[supervised_ai_bot id="1"]

Configuration & Customization

While the internal files manage the heavy lifting, users interact primarily with the CSS and the Shortcode.

Overriding Styles

If you need to change the position of the bot (e.g., move it to the left side), you can target the CSS provided in custom-popup-style.css:

/* Example: Move the launcher and popup to the left */
.popup-container, .circle-button {
    right: auto;
    left: 20px;
}