Toggle & Popup Behavior

Toggle & Popup Behavior

The Supervised AI Bots plugin utilizes a floating action button (FAB) and a responsive popup container to provide a seamless chat experience. The interface is driven by a combination of CSS transitions and JavaScript-based toggle mechanics.

Core Components

The chatbot interface consists of three primary visual elements:

• The Trigger Button: A circular floating button (typically positioned at the bottom-right) that users click to open or close the chat.
• The Popup Container: A fixed-position wrapper (.popup-container) that houses the chat interface.
• The Iframe Host: A specialized container (.iframe-container) that loads the Supervised AI chatbot URL within the popup.

JavaScript Toggle Mechanics

The plugin manages the visibility of the chatbot through two primary global functions. These functions manipulate the display state of the popup element.

togglePopup()

This is the main entry point for user interaction. It checks the current visibility state of the chatbot and flips it.

• Behavior: If the popup is currently visible (display: block), it hides it. If it is hidden, it makes it visible.
• Usage: Automatically bound to the floating circle button.

// Example of the toggle logic
togglePopup(); 

closePopup()

A utility function used to explicitly hide the chatbot interface.

• Behavior: Sets the popup container's display style to none regardless of its current state.
• Usage: Used by internal close triggers or when navigating away from the chat focus.

Layout and Dimensions

The popup is designed to overlay website content without obstructing the main navigation. The default configuration uses the following spatial constraints:

| Property | Value | Description | | :--- | :--- | :--- | | Positioning | fixed | Stays in the bottom-right corner during scrolling. | | Default Width | 400px | Optimized for standard chat layouts. | | Max Width | 800px | Allows for expanded views on larger screens. | | Height | 670px | Fixed height to ensure the iframe content remains scrollable. | | Z-Index | 9999 | Ensures the button remains above all other site elements. |

Iframe Handling

The chatbot itself is rendered within an iframe inside the .iframe-container. This ensures that the Supervised AI service remains isolated from the site's primary CSS and JavaScript, preventing style bleeding or script conflicts.

• Scaling: The iframe is set to width: 100% and height: 100% of the popup container.
• Security: The container uses overflow: hidden to prevent the iframe from creating double scrollbars on your WordPress pages.

Triggering the Popup via Shortcode

When you use the [supervised_ai_bot] shortcode, the plugin automatically injects the necessary HTML structure, including the ID popup required by the script.

<!-- The shortcode generates the following functional structure -->
<div id="popup" class="popup-container">
    <div class="iframe-container">
        <iframe src="YOUR_BOT_URL"></iframe>
    </div>
</div>
<div class="circle-button" onclick="togglePopup()">+</div>