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

1. Visibility Check: When an event triggers togglePopup(), the script checks the current display style of the #popup container.
2. State Transition:
   • If the display is block, it transitions to none.
   • If the display is not block, it transitions to block, making the iframe container visible.
3. 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
});