Popup UX & Behavior

The Supervised AI Bots plugin provides a non-intrusive, floating chat interface that allows visitors to interact with your AI agents without leaving their current page. This section describes the visual components and the interaction logic of the chatbot popup.

The Floating Launcher

By default, the plugin renders a floating action button (FAB) in the bottom-right corner of the website.

Visual Style: A blue circular button (60x60px) containing a text or icon prompt.
Position: Fixed at 20px from the bottom and 20px from the right of the viewport, ensuring it remains accessible as users scroll through your content.
Trigger: Clicking this button executes the togglePopup() function, which acts as the primary gateway for the chat experience.

Chat Window Dimensions

When activated, the chatbot container appears directly above or overlapping the launcher. The interface is optimized for a balance between readability and unobtrusiveness:

Visibility Logic

The popup operates on a simple toggle state.

Initial State: The chat container is hidden (display: none) to keep the site clean during the initial page load.
Opening: Upon clicking the launcher, the container switches to display: block, revealing the chatbot iframe.
Closing: Users can click the launcher again to hide the chat window. The plugin also supports a closePopup() trigger to programmatically dismiss the window.

The Iframe Container

The chatbot content is loaded via an iframe within the popup-body. This ensures that the AI's styles and scripts do not conflict with your WordPress theme.

Seamless Integration: The iframe is configured to occupy 100% of the popup's internal height and width.
Header/Footer: To maximize the conversation area, the standard popup header and footer are hidden by default, giving the AI agent full control over the visual real estate within the 670px tall container.

Interaction Example

For developers looking to trigger the popup behavior manually via custom links or buttons in their theme, you can utilize the following JavaScript interface:

// To toggle the chat window (Open if closed, Close if open)
togglePopup();

// To explicitly close the chat window
closePopup();

Responsive Behavior

The popup uses a fixed width of 400px. Site administrators should ensure that this width accommodates their mobile traffic; on smaller devices, the popup will maintain its right-aligned fixed position.