Popup Interaction Logic

The Supervised AI Bot uses a lightweight JavaScript controller to manage the visibility of the chatbot interface. This logic ensures that the chatbot remains unobtrusive until the user chooses to interact with it.

Core Functions

The interaction is driven by two primary functions that manipulate the display state of the chatbot container.

`togglePopup()`

This function serves as the primary switch for the chatbot interface. It is typically bound to the floating action button (the blue circle) in the bottom-right corner of the screen.

Behavior:
- If the chatbot is currently hidden, it sets the display to block, making the iframe container visible.
- If the chatbot is already open, it sets the display to none, collapsing the interface.
Input: None
Output: Void

`closePopup()`

This function provides a specific command to hide the chatbot interface regardless of its current state.

Behavior: Explicitly sets the chatbot container's display property to none.
Input: None
Output: Void

Implementation Example

The interaction logic is designed to work with specific HTML IDs. By default, the script targets an element with the ID popup.

Triggering the Popup

To use these functions within your own custom themes or elements, you can call them via standard event listeners:

<!-- Example of a custom button to open the bot -->
<button onclick="togglePopup()">Chat with us!</button>

<!-- Example of a custom close link inside a menu -->
<a href="javascript:void(0);" onclick="closePopup()">Minimize Chat</a>

UI Behavior and States

The interaction logic works in tandem with the provided CSS to manage two distinct states:

Note: These functions are internal to the custom-popup-script.js file and are automatically enqueued when using the [supervised_ai_bot] shortcode. No manual initialization is required for standard usage.