JavaScript Functions

The Supervised AI Bots plugin utilizes client-side JavaScript to manage the visibility and interaction of the chatbot interface. These functions control the display state of the chatbot container on your WordPress site.

`togglePopup()`

The togglePopup function serves as the primary controller for switching the chatbot interface between visible and hidden states. It is typically triggered when a user clicks the floating action button.

Behavior:

If hidden: Changes the display state to block, making the chatbot visible to the user.
If visible: Changes the display state to none, hiding the chatbot from view.

Usage Example: This function is intended to be called via an onclick event on a UI trigger:

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

`closePopup()`

The closePopup function provides an explicit method to hide the chatbot interface. Unlike togglePopup, it only performs a closing action, ensuring the interface is hidden regardless of its current state.

Behavior:

Forces the display state of the chatbot container to none.

Usage Example: This is useful for implementing specific "Close" buttons inside the chatbot header or external navigation links:

// Example: Closing the popup programmatically
closePopup();

UI Requirements

For these functions to operate correctly, the following conditions must be met in the DOM:

Element ID: There must be an element present with the ID popup (this is the main container for the chatbot iframe).
CSS Integration: The functions interact with the display property. The custom-popup-style.css file defines the default hidden state of .popup-container.

Note: These functions are included automatically in the plugin's frontend assets. You do not need to manually initialize them unless you are building a custom UI theme for the bot.