Behavior & Logic

Interactive Interface Logic

The wpai plugin manages the chatbot interface through a lightweight JavaScript controller and a CSS-driven popup container. The chatbot is delivered as an iframe within a floating modal, ensuring that the bot remains persistent as the user navigates or scrolls through a page.

Popup State Management

The visibility of the chatbot is controlled via the display property of the #popup element. By default, the chatbot is hidden to prevent obstructing the website content.

togglePopup()

This is the primary function used to switch the chatbot's visibility. It is typically bound to the floating action button (the .circle-button).

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

  <!-- Custom button to open/close the bot -->
  <button onclick="togglePopup()">Chat with us</button>
  

closePopup()

This function explicitly hides the chatbot interface regardless of its current state.

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

  // Programmatically close the bot after a specific user action
  closePopup();
  

Shortcode Execution Logic

The plugin uses a row-based indexing system to determine which Supervised AI URL to load. When a shortcode is placed on a page, the logic follows these steps:

1. ID Retrieval: The plugin reads the id attribute (e.g., [supervised_ai_bot id="2"]).
2. Configuration Lookup: It references the "Supervised AI Bots" settings page and retrieves the URL located on the corresponding line number (Line 1 = ID 1).
3. Iframe Injection: The URL is injected into the src attribute of the iframe inside the .popup-container.

Visual Positioning & Constraints

The chatbot interface is engineered to stay in a fixed position to ensure accessibility:

• Fixed Placement: The bot and its trigger button are anchored to the bottom-right of the viewport (bottom: 20px; right: 20px;).
• Z-Index Management: The popup is assigned a z-index of 1001 (and the button 9999) to ensure the chatbot appears above standard page elements and navigation overlays.
• Dimensions: The default container is optimized for a height of 670px and a width of 400px, providing a mobile-friendly aspect ratio even on desktop screens.

Internal Component Roles

While these components are managed automatically by the plugin, understanding their role is helpful for CSS overrides:

| Component | Role | | :--- | :--- | | .circle-button | The floating action button that triggers togglePopup(). | | .popup-container | The parent wrapper that handles the modal's entry and exit. | | .iframe-container | A responsive wrapper that ensures the Supervised AI chatbot scales to 100% of the modal width. |