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.
Usage: Typically bound to the onclick event 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-index of 9999, ensuring it remains above almost all other WordPress theme elements.
Responsive Dimensions:
- Width: Standard width is 400px, with a max-width constraint of 800px for larger containers.
- Height: Fixed at 670px to maintain a consistent aspect ratio for the chatbot iframe.

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