Interface Behavior
Interface Behavior Overview
The Supervised AI Bot interface operates as a persistent, floating overlay on the WordPress front-end. It utilizes a combination of JavaScript-driven state management and fixed CSS positioning to provide a non-intrusive chat experience.
Core Interaction Functions
The plugin exposes two primary JavaScript functions to manage the visibility of the chatbot interface. These functions interact directly with the DOM element with the ID popup.
togglePopup()
This is the primary interaction handler. It checks the current display state of the chatbot window and switches it between visible and hidden.
- Behavior:
- If the popup is currently visible (
display: block), it hides it. - If the popup is hidden (
display: none), it makes it visible.
- If the popup is currently visible (
- Usage: Typically bound to the
onclickevent of the floating action button (the.circle-button).
// Example: Manual trigger from console or custom script
togglePopup();
closePopup()
A specialized function used to explicitly terminate the current viewing session of the chatbot window.
- Behavior: Forces the popup container's display property to
none, regardless of its current state. - Usage: Used by close icons or "minimize" actions within the interface to ensure the bot is hidden.
// Example: Binding to a custom close button
document.getElementById('my-custom-close-btn').addEventListener('click', closePopup);
Visual Display and Positioning
The chatbot interface is designed to remain accessible without obstructing central page content.
- Fixed Positioning: The interface is anchored to the bottom-right corner of the viewport (
bottom: 20px; right: 20px). - Layering (Z-Index): The floating launcher button is assigned a
z-indexof9999, ensuring it remains above almost all other WordPress theme elements. - Responsive Dimensions:
- Width: Standard width is
400px, with amax-widthconstraint of800pxfor larger containers. - Height: Fixed at
670pxto maintain a consistent aspect ratio for the chatbot iframe.
- Width: Standard width is
Chatbot Integration (Iframe)
The interface acts as a wrapper for the Supervised AI Chatbot URL. The behavior within the iframe-container is as follows:
- Isolation: The chatbot logic runs within an
iframe, preventing CSS or JavaScript conflicts between the chatbot provider and your WordPress theme. - Full-Bleed Rendering: The iframe is styled to occupy 100% of the width and height of the
.popup-body, providing a seamless "app-like" feel. - No Header/Footer: To maximize chat space, the standard plugin UI hides the header and footer containers within the popup, focusing entirely on the AI interaction.
State Summary
| Element | Property | Default State | Trigger |
| :--- | :--- | :--- | :--- |
| .popup-container | display | none (Hidden) | togglePopup() |
| .circle-button | display | block (Visible) | Constant |
| .iframe-container | overflow | hidden | N/A |