Popup Container Architecture
Popup Container Architecture
The Supervised AI Bots plugin utilizes a layered DOM structure to render the chatbot interface over your WordPress site. This architecture ensures that the chatbot remains accessible from any page via a persistent floating action button while maintaining a non-intrusive footprint.
Component Hierarchy
The chatbot interface is composed of two main visual elements: the Trigger Button and the Popup Container. The structural relationship is as follows:
<!-- Interactive Trigger -->
<div class="circle-button" onclick="togglePopup()">...</div>
<!-- Main Chat Interface -->
<div id="popup" class="popup-container">
<div class="popup-header">...</div> <!-- Hidden by default -->
<div class="popup-body">
<div class="iframe-container">
<iframe src="[Bot-URL]"></iframe>
</div>
</div>
<div class="popup-footer">...</div> <!-- Hidden by default -->
</div>
Core Structural Classes
The following CSS classes define the layout and behavior of the chatbot UI:
.popup-container
This is the parent wrapper for the chatbot window. It is fixed to the bottom-right of the viewport.
- ID:
popup(Targeted by JavaScript for visibility toggling). - Dimensions: Default width of
400px(expandable to800px) and a fixed height of670px. - Positioning:
fixedatbottom: 20pxandright: 20px. - Stacking: Set to
z-index: 1001to ensure it appears above standard page content.
.popup-body
The primary content area of the popup. In the current architecture, this section is configured with padding: 0 to allow the chatbot iframe to occupy the full internal dimensions of the container.
.iframe-container
A responsive wrapper inside the body that manages the chatbot's iframe. It is set to height: 670px to match the parent container, ensuring the AI chat interface scales correctly without internal scrollbars.
.circle-button
The floating action button (FAB) used to open the chat.
- Size:
60pxx60px. - Z-Index:
9999(Ensures the trigger button remains visible even when other overlays are active).
Interactive Logic
The popup's visibility is managed by two primary JavaScript functions that interface with the popup-container.
togglePopup()
Switches the visibility state of the chatbot.
- Usage: Triggered by clicking the
.circle-button. - Action: Checks the current
displayproperty of the#popupelement. Ifblock, it hides it (none); ifnone, it displays it (block).
closePopup()
Explicitly hides the chatbot interface.
- Action: Sets the
#popupdisplay style tonone. - Note: This function is provided for programmatic closures or external "close" button implementations.
Dimensions and Styling Reference
If you need to override the default appearance via a child theme or the WordPress Customizer, refer to these architectural constraints:
| Property | Default Value | Description |
| :--- | :--- | :--- |
| Max Width | 800px | The upper limit for the popup width. |
| Width | 400px | The standard width of the chat window. |
| Height | 670px | Fixed height for both the container and the iframe. |
| Bottom/Right | 20px | The offset from the edge of the browser window. |
| Background | #fff | The base color of the popup container. |