Frontend Logic & Events

Frontend Logic & Events

The Supervised AI Bots plugin utilizes a lightweight JavaScript implementation to manage the interaction between the website visitor and the chatbot interface. The frontend logic is primarily concerned with visibility states and the toggling of the chatbot popup.

Primary Interactive Components

The frontend experience is driven by two main elements:

1. The Trigger (Floating Button): A persistent circular button located at the bottom-right of the viewport.
2. The Chat Container (Popup): An iframe-based container that holds the Supervised AI chatbot interface.

Event Handlers

The plugin exposes two primary functions in the global scope to handle visibility. These are triggered by user click events on the chatbot's floating button or close controls.

togglePopup()

This function acts as the primary switch for the chatbot interface. It checks the current display state of the chatbot and reverses it.

• Logic:
  • If the popup is currently visible (display: block), it hides it.
  • If the popup is hidden, it displays it.
• Usage Example:

  <!-- Automatically assigned to the .circle-button element -->
  <div class="circle-button" onclick="togglePopup()">...</div>
  

closePopup()

This function provides an explicit way to hide the chatbot interface regardless of its current state.

• Logic:
  • Sets the popup container's display property to none.
• Usage Example:

  // Can be called programmatically to close the bot after a specific user action
  closePopup();
  

State Management

The chatbot's state is managed via direct DOM manipulation of the CSS display property.

| Element ID | Default State | Visibility Property | Context | | :--- | :--- | :--- | :--- | | popup | none | display | Controls the visibility of the iframe container. |

Layout & Z-Index Hierarchy

To ensure the chatbot remains interactive and visible above other WordPress theme elements, the following stack order is maintained:

• Popup Container (z-index: 1001): Ensures the chat window appears above standard navigation and content.
• Floating Button (z-index: 9999): Set to the highest priority to ensure the user can always initiate a chat session, even if other overlays are present.

Integration Notes

The logic is designed to be non-blocking and relies on the presence of an element with the ID popup. When using the [supervised_ai_bot] shortcode, the plugin automatically generates the necessary HTML structure, including the iframe container and the floating trigger button, ensuring the script hooks work out-of-the-box.