Core Plugin Logic

Core Plugin Logic

The Supervised AI Bots plugin operates through a coordinated interaction between WordPress shortcodes (PHP), a JavaScript-driven popup mechanism, and a fixed-position CSS layout. It effectively wraps a Supervised AI chatbot URL into an interactive iframe that remains accessible across your site.

Shortcode Execution

The primary interface for displaying a bot is the [supervised_ai_bot] shortcode. This shortcode serves as the bridge between your stored settings and the frontend rendering.

Usage:

[supervised_ai_bot id="1"]

• Attribute id: This corresponds to the line number of the URL saved in the plugin settings. For example, id="1" retrieves the first URL provided in the admin dashboard textarea.

When the shortcode is processed, it generates two primary HTML components:

1. A Trigger Button: A floating circular button (.circle-button) that toggles the visibility of the chat interface.
2. A Popup Container: A container (.popup-container) holding an iframe that loads the specified Supervised AI URL.

UI Interaction (JavaScript)

The plugin uses a lightweight script to manage the state of the chatbot interface. This ensures that the chatbot does not interfere with the page content until the user interacts with it.

| Function | Description | | :--- | :--- | | togglePopup() | Reverses the current display state of the chatbot. If the bot is hidden, it opens it; if open, it hides it. This is typically bound to the floating circular button. | | closePopup() | Specifically sets the chatbot container to display: none. Used to dismiss the interface. |

Layout and Rendering (CSS)

The chatbot interface is rendered as an "overlay" to the WordPress theme, ensuring it remains visible regardless of the page scroll position.

• Positioning: Both the trigger button and the popup container are fixed to the bottom-right of the viewport.
• Iframe Dimensions: By default, the iframe is housed within a container set to a height of 670px and a width of 400px (expandable up to 800px on larger screens).
• Layering: The interface uses a high z-index (up to 9999) to ensure the chatbot appears above other theme elements like menus or footers.

Public CSS Classes

If you need to customize the appearance of the bot container or the trigger button, you can target the following classes in your theme’s stylesheet:

/* The floating launch button */
.circle-button {
    background-color: #007bff; /* Change button color */
}

/* The main container for the chatbot */
.popup-container {
    bottom: 20px;
    right: 20px;
}

/* The container wrapping the iframe */
.iframe-container iframe {
    border-radius: 10px;
}

Data Flow Summary

1. Admin Input: User saves URLs in the WordPress Admin textarea.
2. Shortcode Call: User places [supervised_ai_bot id="X"] on a page.
3. PHP Rendering: Plugin fetches the X-th URL and generates the HTML structure with that URL as the iframe src.
4. Frontend Interaction: The user clicks the .circle-button, triggering togglePopup().
5. Display: The .popup-container switches from display: none to display: block, revealing the live Supervised AI bot.