Popup Interaction

Popup Interaction

The Supervised AI Bot features a non-intrusive floating interface designed to provide immediate access to AI assistance without disrupting the user's browsing experience. The interaction is handled via a persistent trigger button and a responsive overlay container.

Floating Action Button (FAB)

The interaction begins with the Circle Button, a floating action button (FAB) positioned at the bottom-right corner of the viewport. This button remains fixed as the user scrolls, ensuring the chatbot is always accessible.

• Location: Bottom-right (20px offset).
• Appearance: A blue circular button containing the chat trigger icon.
• Trigger: Clicking this button executes the togglePopup() function.

Toggle Behavior

The chat interface utilizes a simple toggle mechanic to manage its visibility. This ensures that the chat state is preserved while allowing the user to hide the window when necessary.

Opening the Chat

When a user clicks the floating button, the system checks the current state of the popup:

• If the popup is hidden, it transitions to display: block.
• The chatbot iframe loads within a container designed to prevent page layout shifts.

Closing the Chat

Users can close the chat by clicking the floating button again or through internal close triggers.

• Toggle Toggle: Clicking the FAB while the chat is open will trigger togglePopup(), setting the display to none.
• Direct Close: The closePopup() function is available to programmatically dismiss the window, ensuring the interface is completely removed from the user's view.

Layout and Dimensions

The popup overlay is optimized for readability and interaction while maintaining a compact footprint on the screen.

| Property | Value | Description | | :--- | :--- | :--- | | Width | 400px | Optimized for standard chat bubble interfaces. | | Height | 670px | Fixed height to ensure the chat history remains visible. | | Position | Fixed | Stays anchored to the bottom-right of the browser window. | | Z-Index | 1001+ | Ensures the chat sits above standard page elements and navigation bars. |

Integration Example

The interaction logic is automatically handled by the plugin's included scripts. For developers looking to understand the trigger mechanism, the interaction follows this logic:

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

Mobile Responsiveness

The overlay is designed to be compatible with modern mobile browsers. Because it uses a fixed position and specific z-indexing, the chat container will overlap content at the bottom-right of the screen. It is recommended to test the placement if your site uses other floating elements (like "Back to Top" buttons) to avoid visual conflicts.