Popup & Toggle Behavior

Overview

The Supervised AI Bot uses a non-intrusive floating interface. By default, the chatbot remains hidden until the visitor interacts with a floating action button (FAB) located at the bottom-right of the screen. This behavior ensures that the chatbot is accessible from any page without obstructing the website's primary content.

Interaction Logic

The visibility of the chatbot is controlled by a simple toggle mechanism. The system tracks the display state of the popup container and updates it based on user input.

Main Functions

If you need to trigger the chatbot popup programmatically (e.g., from a custom "Contact Us" button or a navigation link), you can use the following internal functions:

| Function | Description | | :--- | :--- | | togglePopup() | Checks the current state of the chatbot. If hidden, it displays the bot; if visible, it hides it. | | closePopup() | Immediately hides the chatbot window regardless of its current state. |

Example Usage:

<!-- Example of triggering the chatbot from a custom text link -->
<a href="javascript:void(0);" onclick="togglePopup()">Chat with our AI</a>

Visual Components

The interface consists of two primary elements: the Toggle Button and the Popup Container.

Floating Toggle Button

The entry point for the chatbot is a circular blue button fixed to the bottom-right of the viewport.

• Position: Fixed (Bottom: 20px, Right: 20px).
• Appearance: A 60x60px blue circle with a high z-index (9999) to ensure it stays above other page elements.

Popup Container

When activated, the chatbot window appears directly above the toggle button.

• Dimensions: The window is set to a width of 400px and a height of 670px.
• Responsive Behavior: The container has a maximum width of 800px to accommodate larger displays while maintaining a sleek profile on standard screens.
• Content Loading: The Supervised AI interface is loaded via an iframe within this container, ensuring that the bot's scripts do not conflict with your website's existing JavaScript.

Customization via CSS

Users wishing to modify the appearance or positioning of the popup can target the following CSS classes in their theme's stylesheet:

| Class | Purpose | | :--- | :--- | | .circle-button | Styles the floating circular button used to open the chat. | | .popup-container | Styles the main window containing the chatbot iframe. | | .iframe-container | Controls the wrapper for the AI bot content. |

Note: The popup header and footer are hidden by default (display: none) to provide a clean, "app-like" experience focused entirely on the chat interface.