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.
• Usage: Typically bound to the onclick event 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 display style property to none.
• 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 */
}