Popup Interaction Logic

The Supervised AI Bot uses a floating interface located at the bottom-right of the screen. Interaction is handled via a trigger button and a toggleable container that hosts the chatbot iframe.

Overview

The interaction logic relies on two primary states: Visible and Hidden. By default, the chatbot remains hidden until the user interacts with the floating launcher button.

Triggering the Chatbot

The visibility of the chat window is controlled by the togglePopup() function. This function acts as a switch, checking the current display state of the chatbot and reversing it.

Usage Example:

If you are customizing the UI, you can call this function from any clickable element:

<div class="circle-button" onclick="togglePopup()">
    <!-- Icon or Label -->
</div>

Function Behavior:

If the popup is currently hidden (display: none), calling this function will show it (display: block).
If the popup is already open, calling this function will hide it.

Closing the Chatbot

While togglePopup() can be used to close the window, the closePopup() function is available for explicit "Close" actions. This ensures the popup is hidden regardless of its current state.

Usage Example:

// Programmatically close the chat window
closePopup();

Visual Transitions and Dimensions

The popup is designed to overlay page content without interfering with standard navigation. The following properties define the interaction space:

Configuration via CSS

The appearance of the popup during interaction can be customized by targeting the following selectors in your theme's stylesheet:

.popup-container: Controls the main chat window.
.circle-button: Controls the floating launcher button.
.iframe-container: Controls the wrapper for the chatbot content.