Popup & Toggle Mechanics
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: 20pxandright: 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
400pxand a height of670px. - Responsive Behavior: The container uses
position: fixedto hover over the site content, maintaining a highz-indexto 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:
| Class | Description |
| :--- | :--- |
| .circle-button | Styles the floating launcher (default: blue circle). |
| .popup-container | Styles the main wrapper for the chatbot window. |
| .iframe-container | Controls the aspect ratio and scaling of the AI bot iframe. |
Interaction Flow
- The user clicks the Circle Button.
- The script identifies the
popupelement and changes its display fromnonetoblock. - 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.