The Floating Popup System

The Supervised AI Bots plugin features a non-intrusive, floating interface that allows visitors to interact with your AI chatbots without leaving their current page. This system consists of a launcher button and a responsive popup container.

Overview

Once a bot is embedded via shortcode, the system injects a persistent floating action button (FAB) into the bottom-right corner of the webpage. This button acts as the toggle for the AI chat interface.

Component Behavior

1. The Floating Launcher

The launcher is a blue circular button that remains fixed in the bottom-right corner of the browser window.

Accessibility: It stays on top of other page elements (Z-index: 9999).
Action: Clicking the button triggers the togglePopup() function, which opens or closes the chatbot window.

2. The Chat Popup Container

The popup container houses the Supervised AI interface within an iframe.

Dimensions: The window is optimized for chat at a width of 400px (expandable up to 800px) and a fixed height of 670px.
Positioning: Like the launcher, it is pinned to the bottom-right to ensure it is easily reachable on both desktop and mobile views.
Visibility: The container is hidden by default and only appears when the user interacts with the launcher.

Frontend Usage

To enable the floating popup system on a specific page or post, use the provided shortcode. The system automatically handles the rendering of the button and the initialization of the iframe.

[supervised_ai_bot id="1"]

id: Corresponds to the row number of the Bot URL saved in your plugin settings.

Interaction Logic

The system is designed to be lightweight and user-friendly:

Toggling: Users can open the bot to ask a question and click the same button to minimize it. The state is handled via the togglePopup() utility.
Seamless Integration: The iframe container uses a borderless design to make the chatbot feel like a native part of your WordPress theme.

Technical Specifications for UI

If you are styling your site around the chatbot, please note the following frontend specifications: