Interactive Behaviors

Interactive Behaviors

The Supervised AI Bots plugin utilizes a floating action button (FAB) interface to manage the chatbot's visibility on your WordPress site. The interaction is handled via a lightweight JavaScript controller that toggles the visibility of the chatbot container.

Overview

The chatbot remains hidden by default to preserve screen real estate. Users can interact with a persistent circular button (the "Trigger") to open the chat interface. The interface can then be toggled open or closed depending on the user's needs.

Function Reference

The following functions are available globally for managing the chatbot popup state. These are primarily used by the plugin's internal templates but can be called by custom scripts if you are building custom UI elements.

togglePopup()

This is the primary function used to switch the chatbot's visibility state. If the chatbot window is currently hidden, calling this function will display it; if it is visible, it will hide it.

• Logic: Switches the CSS display property of the #popup element between block and none.
• Usage Example:

  <!-- Example of a custom button to toggle the bot -->
  <button onclick="togglePopup()">Chat with us</button>
  

closePopup()

This function explicitly hides the chatbot interface regardless of its current state. It is useful for implementing "Close" buttons or overlay-click-to-close behaviors.

• Logic: Sets the CSS display property of the #popup element to none.
• Usage Example:

  // Programmatically close the popup after a specific user action
  function onFormSubmit() {
      // ... custom logic ...
      closePopup();
  }
  

Element Targeting

For these functions to operate correctly, the chatbot container must have the ID popup. In a standard installation, the plugin handles this automatically.

| Element ID | Role | Default Behavior | | :--- | :--- | :--- | | popup | Chatbot Container | Controlled by togglePopup and closePopup. | | .circle-button | Trigger Button | Positioned at the bottom-right; invokes togglePopup on click. |

Visual States

The interaction follows these CSS-driven states:

1. Hidden State: The .popup-container (ID popup) has display: none.
2. Visible State: The container is set to display: block, appearing above other content with a z-index of 1001.
3. Responsive Positioning: By default, the bot appears 20px from the bottom and 20px from the right of the viewport.