Popup & Toggle Mechanics

The Supervised AI Bots plugin utilizes a floating interface designed to provide a non-intrusive yet accessible chat experience. The interaction is driven by a floating action button (launcher) and a responsive iframe container.

Overview

The interface consists of two primary states:

Minimized: A persistent circle button appears in the bottom-right corner of the screen.
Expanded: A chat window (popup) containing the AI bot iframe appears above the launcher.

The Floating Launcher

The interaction starts with the .circle-button. This element is fixed to the viewport, ensuring users can initiate a chat session regardless of their scroll position on the WordPress page.

Position: Fixed at bottom: 20px and right: 20px.
Action: Clicking this button triggers the togglePopup() function, which switches the visibility of the chatbot interface.

The Chat Window (Iframe Container)

When activated, the chatbot loads within a styled container (.popup-container). To ensure the AI interface remains seamless, the plugin hides standard UI headers and footers, focusing entirely on the bot's conversation area.

Dimensions: The window is optimized at a width of 400px and a height of 670px.
Responsive Behavior: The container uses position: fixed to hover over the site content, maintaining a high z-index to prevent overlap from other theme elements.

Interactive Controls

While the plugin handles the toggle mechanics automatically, the following internal functions govern the behavior of the interface:

`togglePopup()`

This function serves as the primary toggle logic. It checks the current display state of the chatbot and switches between visible and hidden.

// Example: Manual trigger from a custom element
togglePopup();

`closePopup()`

This function explicitly hides the chatbot window. It is used to ensure the chat session is minimized without refreshing the page or losing state.

// Example: Closing the bot via a custom "Cancel" button
closePopup();

CSS Customization

The appearance of the toggle and the popup can be adjusted via your theme's stylesheet or the WordPress Customizer. Key classes include:

Interaction Flow

The user clicks the Circle Button.
The script identifies the popup element and changes its display from none to block.
The Supervised AI Bot URL (defined in settings) loads via an iframe inside the .iframe-container.
The user can interact with the bot or click the button again to hide the window.