Popup UI & Interaction

Overview

The Supervised AI Bot features a non-intrusive, floating popup interface designed to sit unobtrusively on your website until needed. The UI consists of two primary states: a collapsed launcher button and an expanded chat window.

Visual Components

The interface is built with three main structural elements:

1. The Launcher Button

This is a fixed circular button (.circle-button) that appears in the bottom-right corner of the browser window. It serves as the primary interaction point for users to open or close the chat interface.

Default Position: 20px from the bottom and 20px from the right.
Styling: A blue circle (60x60px) with a high z-index to ensure it remains visible above other page content.

2. The Chat Window

When activated, a container (.popup-container) appears above the launcher.

Dimensions: The window is set to a fixed height of 670px and a width of 400px.
Interface: The header and footer are hidden by default to provide a clean, "edge-to-edge" conversation experience.

3. The Iframe Container

The chatbot content itself is loaded via an <iframe> within a dedicated container. This ensures that the chatbot's internal styles and scripts do not conflict with your WordPress theme's CSS.

Interaction Behavior

The popup is controlled by simple JavaScript logic that toggles the visibility of the chat window based on user input.

Toggling the Window

The interface uses a toggle mechanism. If the chat window is closed, clicking the launcher will open it; if it is open, clicking will hide it.

// Internal logic used to switch visibility
togglePopup();

Closing the Window

The window can be programmatically closed using the close function, which explicitly sets the display state to hidden.

// Internal logic used to hide the popup
closePopup();

UI Specifications

For developers or designers looking to understand the layout constraints:

Placement & Usage

The popup UI is automatically injected when using the [supervised_ai_bot] shortcode. While the CSS provides a default look and feel, the fixed positioning ensures that the chatbot remains accessible even as users scroll through long-form content on your posts or pages.

To display a bot within this UI, use the standard shortcode format in your WordPress editor:

[supervised_ai_bot id="1"]

Note: The id corresponds to the row number of the Bot URL you configured in the plugin settings.