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 highz-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
400pxand a height of670px. - 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
10pxborder-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 tonone, 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.