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 to 800px) and a fixed height of 670px.
• Positioning: fixed at bottom: 20px and right: 20px.
• Stacking: Set to z-index: 1001 to 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: 60px x 60px.
• 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 display property of the #popup element. If block, it hides it (none); if none, it displays it (block).

closePopup()

Explicitly hides the chatbot interface.

• Action: Sets the #popup display style to none.
• 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. |