Client-Side Logic
Client-Side Logic
The client-side behavior of the Supervised AI Bots plugin is managed by a lightweight JavaScript file (custom-popup-script.js). This script handles the interaction between the user and the chatbot interface, specifically controlling the visibility of the chat popup.
Event Handling Functions
The following functions are available globally to manage the chatbot UI state.
togglePopup()
This is the primary function used to switch the visibility state of the chatbot window. It checks the current display status of the popup and toggles it between hidden and visible.
- Logic:
- If the popup is currently visible (
display: block), it hides it. - If the popup is hidden, it displays it.
- If the popup is currently visible (
- Usage: Typically bound to the
onclickevent of the floating circle button.
Example Usage:
<!-- Example of the button triggering the toggle -->
<div class="circle-button" onclick="togglePopup()">
<span>Chat</span>
</div>
closePopup()
This function explicitly hides the chatbot window regardless of its current state.
- Logic: Sets the popup element's
displaystyle property tonone. - Usage: Use this function when you need an explicit "Close" or "Minimize" action inside the chatbot interface or a custom overlay.
Example Usage:
// Programmatically closing the popup from another script
closePopup();
UI Integration
These functions interact directly with the DOM element with the ID popup. For the script to function correctly, ensure the HTML structure contains an element with that ID, usually styled with the .popup-container class.
| Function | Targeted Element ID | Primary Trigger |
| :--- | :--- | :--- |
| togglePopup() | popup | Floating action button (.circle-button) |
| closePopup() | popup | Close icons or external UI events |
CSS Requirements
For these transitions to be effective, the popup element should have the following initial state in your stylesheet:
#popup {
display: none; /* Hidden by default */
}