Popup Architecture

Popup Architecture Overview

The Supervised AI Bots plugin utilizes a fixed-position interface to provide a seamless chatbot experience. This architecture ensures the chatbot remains accessible to visitors as they navigate your site, without disrupting the primary content flow. The interface consists of two main components: a floating trigger button and a hidden-by-default iframe container.

Core Components

The popup UI is built using standard HTML5 and CSS3, ensuring compatibility across modern browsers.

• Floating Toggle Button (.circle-button): A persistent circular button located at the bottom-right of the viewport. It acts as the primary entry point for the user.
• Popup Container (.popup-container): A fixed-position wrapper that hosts the Supervised AI chatbot iframe. It is hidden by default and transitions to a visible state when triggered.
• Iframe Host (.iframe-container): A dedicated container within the popup that manages the aspect ratio and display of the external chatbot URL.

Interaction Logic

The popup state is managed via a lightweight JavaScript interface. While the plugin handles these triggers automatically via the shortcode implementation, you can manually interact with the popup using the following global functions:

togglePopup()

Switches the visibility of the chatbot interface. If the popup is hidden, this function displays it; if it is already open, it hides it.

// Example: Manually toggling the bot from a custom site element
document.getElementById('my-custom-link').addEventListener('click', function() {
    togglePopup();
});

closePopup()

Explicitly hides the chatbot interface regardless of its current state.

// Example: Closing the bot after a specific user action
closePopup();

Visual Specifications

The default styling provides a modern, "chat bubble" aesthetic. You can override these styles in your theme's CSS if customization is required.

| Element | Default Position | Dimensions | Z-Index | | :--- | :--- | :--- | :--- | | Toggle Button | Bottom: 20px, Right: 20px | 60px x 60px | 9999 | | Popup Container | Bottom: 20px, Right: 20px | 400px x 670px | 1001 |

Customization via CSS

To modify the appearance of the popup architecture, you can target the following CSS classes. This is useful for adjusting the theme color or repositioning the bot to the left side of the screen.

/* Example: Changing the trigger button color */
.circle-button {
    background-color: #ff5733 !important; /* Changes the blue to orange */
}

/* Example: Moving the popup to the left side */
.circle-button, .popup-container {
    right: auto !important;
    left: 20px !important;
}

Technical Notes

• Responsive Design: The popup container has a max-width of 800px but defaults to 400px for standard desktop viewing.
• Layering: The z-index for the toggle button is set to 9999 to ensure it remains above most WordPress theme elements, including headers and modals.
• Header/Footer: By default, the .popup-header and .popup-footer within the container are set to display: none to maximize the vertical space for the Supervised AI chatbot iframe.