Event Handling
Interaction and Event Handling
The Supervised AI Bots plugin provides a seamless user experience through a floating action button (FAB) interface. The interaction logic is handled via a set of lightweight JavaScript functions that manage the visibility of the chatbot popup.
The Trigger Button
The primary entry point for the chatbot is a circular button (.circle-button) fixed to the bottom-right corner of the browser window. This button is configured to listen for click events to toggle the chat interface.
Programmatic Control
If you need to trigger the chatbot from other elements on your page (such as a "Contact Support" link or a custom menu item), you can utilize the following global functions:
togglePopup()
Toggles the visibility state of the chatbot. If the chatbot is currently hidden, it will appear; if it is visible, it will be dismissed.
Example Usage:
<!-- Trigger the chatbot from a custom button -->
<button onclick="togglePopup()">Chat with us!</button>
closePopup()
Explicitly closes the chatbot window. This is useful for scenarios where you want to ensure the popup is hidden after a specific user action elsewhere on the site.
Example Usage:
// Automatically close the chat when a user navigates or clicks a specific element
document.querySelector('.close-trigger').addEventListener('click', function() {
closePopup();
});
Event Logic Flow
- Visibility Check: When an event triggers
togglePopup(), the script checks the currentdisplaystyle of the#popupcontainer. - State Transition:
- If the display is
block, it transitions tonone. - If the display is not
block, it transitions toblock, making the iframe container visible.
- If the display is
- Z-Index Management: The popup is assigned a high
z-index(1001) to ensure it appears above standard page content and the trigger button (9999).
Custom Event Integration
Since the event handlers are attached to global functions, you can easily integrate them with third-party analytics or custom UI components:
// Example: Tracking when a user opens the chat
document.querySelector('.circle-button').addEventListener('click', function() {
console.log("Chatbot interface toggled.");
// Add your analytics tracking code here
});