Popup Interaction Logic

The custom-popup-script.js file manages the visibility and interaction states of the Supervised AI chatbot interface. These functions are responsible for displaying the chatbot to the user and dismissing it when required.

Key Functions

`togglePopup()`

This function serves as the primary interaction point for the chatbot UI. It switches the visibility of the chatbot container based on its current state.

Behavior:
- If the popup is currently visible (display: block), it hides the popup.
- If the popup is hidden, it displays the popup.
Usage: Typically bound to the onclick event of the floating action button (the .circle-button element).

Example Usage:

<!-- The floating action button calls togglePopup on click -->
<div class="circle-button" onclick="togglePopup()">
    💬
</div>

<!-- The target element must have the id "popup" -->
<div id="popup" class="popup-container">
    <!-- Chatbot Iframe Content -->
</div>

`closePopup()`

This function provides a definitive way to hide the chatbot interface, regardless of its current state.

Behavior: Explicitly sets the display property of the popup container to none.
Usage: Used when a specific "Close" or "Dismiss" action is triggered within the UI, ensuring the chatbot window is removed from the user's view.

Example Usage:

// Manually closing the popup via a script
closePopup();

Integration Requirements

To ensure the interaction logic functions correctly, the following structural requirements must be met in your HTML/PHP templates:

Element ID: The chatbot container must have the attribute id="popup". The JavaScript functions specifically target this ID.
Initial State: By default, the CSS sets the .popup-container to display: none. The interaction logic overrides this style dynamically.
Z-Index Management: The popup is configured with a high z-index (1001) to ensure it appears above other page elements. Ensure that no other site elements use a higher index if you want the chatbot to remain prominent.