Popup UI & Interaction
Overview
The Supervised AI Bot features a non-intrusive, floating popup interface designed to sit unobtrusively on your website until needed. The UI consists of two primary states: a collapsed launcher button and an expanded chat window.
Visual Components
The interface is built with three main structural elements:
1. The Launcher Button
This is a fixed circular button (.circle-button) that appears in the bottom-right corner of the browser window. It serves as the primary interaction point for users to open or close the chat interface.
- Default Position: 20px from the bottom and 20px from the right.
- Styling: A blue circle (60x60px) with a high
z-indexto ensure it remains visible above other page content.
2. The Chat Window
When activated, a container (.popup-container) appears above the launcher.
- Dimensions: The window is set to a fixed height of 670px and a width of 400px.
- Interface: The header and footer are hidden by default to provide a clean, "edge-to-edge" conversation experience.
3. The Iframe Container
The chatbot content itself is loaded via an <iframe> within a dedicated container. This ensures that the chatbot's internal styles and scripts do not conflict with your WordPress theme's CSS.
Interaction Behavior
The popup is controlled by simple JavaScript logic that toggles the visibility of the chat window based on user input.
Toggling the Window
The interface uses a toggle mechanism. If the chat window is closed, clicking the launcher will open it; if it is open, clicking will hide it.
// Internal logic used to switch visibility
togglePopup();
Closing the Window
The window can be programmatically closed using the close function, which explicitly sets the display state to hidden.
// Internal logic used to hide the popup
closePopup();
UI Specifications
For developers or designers looking to understand the layout constraints:
| Feature | Specification | | :--- | :--- | | Positioning | Fixed (Bottom-Right) | | Default Width | 400px | | Default Height | 670px | | Z-Index | 9999 (Launcher), 1001 (Container) | | Animation | Instant display toggle |
Placement & Usage
The popup UI is automatically injected when using the [supervised_ai_bot] shortcode. While the CSS provides a default look and feel, the fixed positioning ensures that the chatbot remains accessible even as users scroll through long-form content on your posts or pages.
To display a bot within this UI, use the standard shortcode format in your WordPress editor:
[supervised_ai_bot id="1"]
Note: The id corresponds to the row number of the Bot URL you configured in the plugin settings.