File Manifest

File Manifest

This section provides an overview of the plugin's structure and the purpose of each asset within the wpai repository. Understanding these files is essential for developers looking to customize the chatbot's appearance or behavior.

Directory Structure

wpai/
├── wpai.php                    # Main plugin entry point (Shortcode & Admin logic)
├── custom-popup-script.js      # Frontend interactivity logic
├── custom-popup-style.css      # Frontend visual styles and positioning
└── README.md                   # Documentation and usage guide

File Descriptions

wpai.php (Main Plugin File)

This is the core of the WordPress plugin. It handles the server-side logic required to integrate the AI bots into your site.

• Role: Registers the [supervised_ai_bot] shortcode and manages the administration settings page.
• Public Interface:
  • Shortcode: [supervised_ai_bot id="X"]
  • Attributes: id (The row number of the bot URL configured in settings).

custom-popup-script.js

This file manages the client-side behavior of the chatbot widget, specifically how it responds to user clicks.

• Role: Toggles the visibility of the chatbot iframe.
• Key Functions:
  • togglePopup(): Switches the chatbot window between display: block and display: none. This is triggered when the user clicks the floating action button.
  • closePopup(): Explicitly hides the chatbot interface.

custom-popup-style.css

This stylesheet defines the look and feel of the Supervised AI Chatbot widget as it appears to your visitors.

• Role: Controls the responsive positioning, sizing, and layering (z-index) of the chat interface.
• Configurable Elements:
  • .popup-container: Defines the chat window dimensions (default 400px width, 670px height) and its fixed position at the bottom-right.
  • .circle-button: Styles the floating launcher icon (blue by default).
  • .iframe-container: Manages the responsiveness of the embedded chatbot frame.

README.md

The primary documentation file for the project.

• Role: Provides installation steps, configuration instructions, and technical support links for users and administrators.

Usage Example: Customizing the UI

If you wish to change the size of the chatbot window, you would modify the properties within custom-popup-style.css:

/* Example: Increasing the height of the chatbot window */
.popup-container {
    height: 800px; /* Default is 670px */
}

.iframe-container {
    height: 800px;
}