JavaScript Functions
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
displayproperty. Thecustom-popup-style.cssfile 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.