Script & Style Loading

Frontend Asset Loading

The Supervised AI Bots plugin automatically enqueues the necessary CSS and JavaScript files on the frontend of your WordPress site. These assets ensure that the chatbot interface is styled correctly and functions interactively when a shortcode is used.

Enqueued Assets

• custom-popup-style.css: Manages the visual presentation of the chatbot, including its fixed positioning, the appearance of the floating toggle button, and the iframe container dimensions.
• custom-popup-script.js: Handles the logic for opening and closing the chatbot window when a user interacts with the floating button.

Script Functionality

The plugin uses a lightweight JavaScript implementation to manage the state of the chatbot popup. By default, these functions are tied to the UI elements generated by the [supervised_ai_bot] shortcode.

Interactive Controls

The script provides global functions to manage the visibility of the bot interface:

| Function | Description | | :--- | :--- | | togglePopup() | Switches the chatbot visibility between block (visible) and none (hidden). | | closePopup() | Specifically sets the chatbot container to display: none. |

If you are developing custom themes or integrations, you can programmatically trigger these functions to open the chatbot from custom buttons or links.

Style & Layout Logic

The plugin applies a modern, non-intrusive layout for the chatbot. The styles are optimized for a "floating" experience that stays visible as the user scrolls.

Container Dimensions

The chatbot interface is rendered within an iframe container with the following default specifications:

• Positioning: Fixed to the bottom-right of the viewport (bottom: 20px, right: 20px).
• Default Width: 400px (with a maximum width of 800px on responsive screens).
• Default Height: 670px.
• Z-Index: Set to 9999 for the trigger button and 1001 for the popup, ensuring it appears above most standard theme elements.

The Floating Action Button (FAB)

A circular trigger button is automatically generated and positioned at the bottom-right of the screen.

/* Example of the trigger button style */
.circle-button {
    width: 60px;
    height: 60px;
    background-color: #007bff;
    border-radius: 50%;
    /* ... additional styling ... */
}

Overriding Styles

To customize the appearance (such as changing the primary blue color or moving the button to the left), you can target the following CSS classes in your theme’s stylesheet:

• .circle-button: The floating toggle button.
• .popup-container: The main wrapper for the chatbot.
• .iframe-container: The container specifically housing the chatbot iframe.

Note: The header and footer within the popup container are hidden by default (display: none) to provide a clean, "iframe-only" experience.