File Structure Deep Dive

File Structure Overview

The Supervised AI Bots (wpai) plugin is built with a modular approach, separating the core WordPress logic from the frontend presentation and interactivity. This structure ensures that the chatbot remains lightweight and non-intrusive while providing a seamless user experience.

custom-popup-plugin.php (Core Logic)

This is the main entry point of the plugin. Its primary responsibility is to bridge the WordPress backend with the AI chatbot interface.

• Role: Handles plugin initialization, administrative settings, and shortcode registration.
• Key Interface:
  • Settings Page: Provides a UI for users to input Supervised AI chatbot URLs.
  • Shortcode Engine: Registers the [supervised_ai_bot] shortcode, which translates user input into a functional chatbot widget.

Usage Example: To render a chatbot associated with the first URL saved in your settings, use the following shortcode within any page or post:

[supervised_ai_bot id="1"]

custom-popup-style.css (Presentation Layer)

This file defines the visual appearance of the chatbot widget on your website. It ensures the chatbot follows a modern, "floating bubble" design pattern.

• Role: Manages the positioning, dimensions, and responsiveness of the chatbot container.
• Public Classes:
  • .circle-button: Styles the floating launcher button (typically positioned at the bottom-right).
  • .popup-container: Controls the dimensions of the chatbot window (fixed at 400px width and 670px height by default).
  • .iframe-container: Ensures the Supervised AI bot scales correctly within the popup.

Customization Note: Users can override these styles in their theme's CSS to change the button color or the popup's screen position.

custom-popup-script.js (Interaction Layer)

This file manages the state of the chatbot widget, handling how it opens and closes in response to user clicks.

• Role: Provides the client-side logic for the popup toggle mechanism.
• Public Functions:
  • togglePopup(): The primary trigger that switches the chatbot window between visible and hidden states.
  • closePopup(): Explicitly hides the chatbot window.

Internal Logic Flow: When a visitor clicks the .circle-button generated by the shortcode, the togglePopup() function is invoked, modifying the display property of the .popup-container.

// Example of the toggle interaction
function togglePopup() {
    var popup = document.getElementById('popup');
    // Switches display between 'none' and 'block'
}

Asset Integration

The plugin automatically enqueues these assets only when the [supervised_ai_bot] shortcode is detected or when the plugin is active, ensuring that your site's performance is not impacted on pages where a chatbot is not required.

| File | Type | Responsibility | | :--- | :--- | :--- | | custom-popup-plugin.php | PHP | Shortcode processing & URL Management | | custom-popup-style.css | CSS | Layout, Positioning, and UI | | custom-popup-script.js | JS | Open/Close animations and state |