Toggle & Interaction Logic

Toggle & Interaction Logic

The wpai plugin uses a lightweight JavaScript handler to manage the visibility of the AI chatbot interface. The interaction is driven by a floating action button (FAB) that triggers a popup container containing the chatbot iframe.

Core Interaction Functions

The plugin exposes two primary functions to manage the chatbot's state. These functions interact with the DOM element with the ID popup.

togglePopup()

This is the primary function used by the floating action button. it acts as a switcher to either open or close the chatbot interface based on its current state.

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

  <!-- Triggered via the floating circle button -->
  <div class="circle-button" onclick="togglePopup()">
      <span>Chat</span>
  </div>
  

closePopup()

An explicit utility function used to hide the chatbot interface regardless of its current state. This is typically used for "Close" or "X" buttons within the chatbot UI.

• Behavior: Forces the popup element's display style to none.
• Usage Example:

  // Programmatically close the bot from another script
  closePopup();
  

UI Components & Selectors

To ensure the interaction logic functions correctly, the plugin relies on specific HTML structures and CSS classes.

| Element | Selector | Description | | :--- | :--- | :--- | | Popup Container | #popup | The main wrapper for the chatbot. Must have this ID for the JS logic to target it. | | Floating Button | .circle-button | The fixed-position button at the bottom-right of the screen that users click to initiate chat. | | Iframe Container| .iframe-container| Ensures the Supervised AI bot scales correctly within the popup window. |

Visual State Management

The interaction logic modifies the inline CSS display property of the chatbot container. By default, the chatbot is hidden on page load via the popup-container class in custom-popup-style.css:

.popup-container {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
}

When togglePopup() is invoked, the logic overrides this class setting to display: block, making the chatbot visible to the user at the specified coordinates.