File System Overview

File System Overview

The wpai (Supervised AI Bots) plugin is structured to be lightweight and modular, ensuring easy integration of AI chatbots into any WordPress environment. Below is a breakdown of the primary files and their specific responsibilities.

Directory Structure

supervised-ai-bots/
├── custom-popup-script.js    # Front-end interaction logic
├── custom-popup-style.css     # UI presentation and positioning
├── README.md                 # Plugin documentation and instructions
└── [plugin-core].php         # Main WordPress integration (Shortcode/Admin)

Core Files

1. README.md

This is the primary documentation source for the plugin. It provides high-level guidance for administrators and developers, covering:

• Installation Procedures: Standard WordPress plugin deployment steps.
• Configuration: How to manage chatbot URLs via the WordPress Admin dashboard.
• Shortcode Implementation: Usage examples for the [supervised_ai_bot] shortcode to embed specific bots into posts or pages.

2. custom-popup-script.js

This file handles the client-side behavior of the chatbot interface. It manages the visibility states of the chatbot window to ensure a smooth user experience.

• Key Functions:
  • togglePopup(): Logic to switch the chatbot window between visible and hidden states.
  • closePopup(): Specifically handles the dismissal of the chatbot interface.

// Example: Manually triggering the popup via a custom link
// <a href="#" onclick="togglePopup()">Chat with us</a>

3. custom-popup-style.css

This stylesheet defines the visual identity and positioning of the chatbot components. It uses fixed positioning to ensure the bot remains accessible as users scroll through your site.

• Customizable Elements:
  • .popup-container: Controls the dimensions (default 400px width) and the fixed position of the chat window.
  • .circle-button: Defines the look of the floating trigger button (default: blue circle, bottom-right).
  • .iframe-container: Manages the scaling of the external Supervised AI bot within the WordPress site.

/* Example: Overriding the button color in your child theme */
.circle-button {
    background-color: #ff5733 !important; /* Changes trigger to orange */
}

Functional Responsibility

| File | Responsibility | | :--- | :--- | | Logic (PHP) | Registers shortcodes, handles the Admin UI, and enqueues scripts/styles. | | Styling (CSS) | Manages the "Floating" UI, iframe responsiveness, and z-index layering. | | Interactivity (JS) | Responds to user clicks to open or close the chat interface. | | Docs (Markdown) | Provides end-user instructions and version history. |

Public Interface & Integration

The plugin exposes functionality primarily through the WordPress Shortcode API. When a shortcode is placed on a page, the system automatically pulls the styles from custom-popup-style.css and the behavior from custom-popup-script.js to render the bot.

Shortcode Usage:

[supervised_ai_bot id="1"]

• id: Corresponds to the row number of the bot URL entered in the plugin settings.