Popup Interface Design

Popup Interface Design

The Supervised AI Bots plugin utilizes a non-intrusive, floating interface designed to provide immediate access to AI assistance without disrupting the user's browsing experience. The interface consists of two primary components: the Launcher Button and the Chat Container.

Floating Action Button (Launcher)

The interface is triggered by a fixed-position "Floating Action Button" (FAB). This circular button remains anchored to the bottom-right corner of the viewport, ensuring it is always accessible to the visitor.

• Position: Fixed (20px from bottom, 20px from right).
• Visual Style: A 60x60px blue circle (#007bff) featuring a high z-index (9999) to ensure it appears above all other page elements.
• Interaction: Clicking this button toggles the visibility of the chatbot window.

Chat Container

Once activated, the chat container appears directly above or over the launcher button. It is designed to house the external Supervised AI chatbot URL within a seamless iframe wrapper.

Layout and Positioning

The container follows a fixed-layout design to maintain consistency across different pages:

• Dimensions: The window is set to a standard width of 400px and a height of 670px.
• Shadow & Depth: A subtle box shadow (rgba(0,0,0,0.3)) is applied to provide visual separation from the website content.
• Corner Radius: A 10px border-radius is applied for a modern, integrated feel.

Iframe Wrapper

The chatbot content is loaded via an iframe-container. This wrapper is critical for ensuring the AI interface occupies the full dimensions of the popup without scrollbars or overflow issues.

/* Container ensures the iframe fills the popup area exactly */
.iframe-container {
    position: relative;
    height: 670px;
    overflow: hidden;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

User Interaction & Control

The interface visibility is managed through simple state-switching logic. Users can open the chat to interact with the bot and close it when finished to reclaim screen real estate.

Toggle Logic

The plugin handles the display state through the following internal functions:

• togglePopup(): Checks the current display status of the window. If hidden, it displays the window; if visible, it hides it.
• closePopup(): Explicitly sets the window display to none, providing a way to programmatically exit the chat interface.

// Example of the interaction logic used by the interface
function togglePopup() {
    var popup = document.getElementById('popup');
    if (popup.style.display === 'block') {
        popup.style.display = 'none';
    } else {
        popup.style.display = 'block';
    }
}

Responsive Design

The interface is optimized for desktop and tablet viewing. With a max-width setting of 800px and a fixed width of 400px, the container ensures that the chatbot remains legible and functional. The fixed positioning at the bottom-right (bottom: 20px; right: 20px;) follows standard UI patterns for web-based messaging apps, minimizing interference with primary navigation menus usually located at the top or left of the screen.