User Event Listeners

The Supervised AI Bots plugin utilizes a lightweight JavaScript interface to manage how users interact with the chatbot popup on your WordPress site. The frontend behavior is driven by two primary interaction triggers.

Interaction Overview

Visitors interact with the chatbot via a floating action button (FAB) located at the bottom-right corner of the screen. This button acts as the primary toggle for the chat interface.

Functionality Breakdown

Toggle Popup

The togglePopup() function manages the transition between the hidden and visible states of the chatbot container. When a user clicks the floating circle button, the plugin checks the current display status:

If hidden: The popup container (#popup) is displayed, showing the Supervised AI interface.
If visible: The popup container is hidden to clear the user's view.

// Example of the toggle logic triggered by the floating button
togglePopup();

Close Popup

The closePopup() function is a dedicated listener used to explicitly hide the chatbot interface. It ensures the display property of the popup container is set to none, regardless of its previous state.

// Example of an explicit close action
closePopup();

Display Behavior and Transitions

The plugin handles transitions using CSS-based display states. Users will experience the following behavior:

Customizing Interaction

The listeners are bound to the following HTML elements generated by the plugin:

Trigger Element: .circle-button (The floating blue icon).
Target Container: .popup-container (The wrapper for the chatbot iframe).

If you wish to trigger the chatbot from a custom menu item or link, you can call the togglePopup() function directly within an onclick attribute in your WordPress editor:

<button onclick="togglePopup()">Chat with us!</button>