Interactive Controls

The Supervised AI Bot plugin provides a seamless floating interface for website visitors. The interaction is primarily managed through a responsive floating action button (FAB) and a popup container that hosts the AI chatbot.

Chatbot Visibility Mechanisms

The chatbot UI relies on two primary JavaScript functions to handle user interaction. These functions control the visibility of the chatbot window by toggling the CSS display properties of the interface.

`togglePopup()`

This is the primary function used to switch the visibility of the chatbot. If the chat window is hidden, this function displays it; if it is currently visible, it hides it.

Usage Example:

<!-- Example of triggering the toggle via a custom link or button -->
<button onclick="togglePopup()">Chat with us</button>

`closePopup()`

This function explicitly hides the chatbot window regardless of its current state. It is used to ensure the interface is dismissed when a user concludes their session or clicks a close element.

Usage Example:

// Programmatically closing the bot window from another script
closePopup();

UI Components

The interaction is styled to remain unobtrusive until activated. The following components define the interactive experience:

Floating Action Button (.circle-button): A fixed circular button (defaulting to the bottom-right corner) that serves as the entry point for the user. It triggers the togglePopup() function.
Popup Container (.popup-container): The main wrapper for the chatbot. It is hidden by default and appears when triggered.
Iframe Host (.iframe-container): A dedicated container within the popup that loads the Supervised AI interface via an iframe, ensuring the bot's functionality is isolated and does not conflict with your site's styles.

Interaction States

Implementation Note

The interactive controls are automatically bound to the default floating button provided by the plugin. However, developers can utilize the togglePopup() and closePopup() functions within their own custom navigation menus or "Contact Us" buttons to provide alternative ways for users to launch the AI assistant.