Popup & Interface Logic

The Supervised AI Bots plugin utilizes a lightweight JavaScript-driven interface to manage how chatbots appear to your visitors. The interface consists of a Floating Action Button (FAB) and a fixed-position popup container that houses the chatbot iframe.

Toggle Functions

The plugin exposes two primary JavaScript functions to handle the visibility of the chatbot interface. These functions interact with the DOM element with the ID popup.

`togglePopup()`

This function serves as the primary trigger for the chat interface. It checks the current display state of the chatbot and switches it between visible (block) and hidden (none).

Usage Example:

<!-- Automatically attached to the .circle-button in the plugin UI -->
<div class="circle-button" onclick="togglePopup()">
    <!-- Icon or Label -->
</div>

`closePopup()`

This function explicitly hides the chatbot interface regardless of its current state. It is used to ensure the popup is closed when a user interacts with a "close" or "minimize" action.

Usage Example:

// Programmatically close the bot from another script
closePopup();

Iframe Container Mechanics

To ensure the chatbot functions independently of your WordPress theme's styles, the bot is loaded within an isolated iframe container. This prevents CSS conflicts and ensures the Supervised AI platform renders correctly.

Responsive Scaling: The container is designed with a fixed width of 400px and a height of 670px, optimized for both desktop and mobile viewing.
Z-Index Management: The interface uses a high z-index (up to 9999 for the button and 1001 for the popup) to ensure the chatbot always appears above other page elements like navigation bars or footers.
Positioning: Both the trigger button and the popup container are anchored to the bottom: 20px and right: 20px coordinates of the viewport.

Interface Dimensions & Constraints

If you are customizing your site layout, keep the following interface constraints in mind:

Visibility Logic

By default, the chatbot interface is hidden (display: none). The state is only changed to block when the togglePopup() function is invoked by a user click. This ensures that the iframe and its associated resources do not interfere with the initial page load or user experience until the visitor chooses to interact with the bot.