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-widthof 800px but defaults to400pxfor standard desktop viewing. - Layering: The
z-indexfor the toggle button is set to9999to ensure it remains above most WordPress theme elements, including headers and modals. - Header/Footer: By default, the
.popup-headerand.popup-footerwithin the container are set todisplay: noneto maximize the vertical space for the Supervised AI chatbot iframe.