Popup & Interaction Logic

Popup & Interaction Logic

The Supervised AI Bots plugin utilizes a lightweight JavaScript controller to manage the visibility of the chatbot interface. This logic ensures that the chatbot remains unobtrusive until the user chooses to interact with it.

Core Functions

The interaction is driven by two primary functions defined in custom-popup-script.js. These functions manipulate the CSS display property of the chatbot container.

togglePopup()

This function serves as the primary toggle mechanism. It checks the current state of the chatbot window and switches it between visible and hidden.

• Behavior:
  • If the chatbot is currently visible (display: block), it will be hidden.
  • If the chatbot is hidden, it will be displayed.
• Usage: Typically attached to the onclick event of the floating action button (.circle-button).

// Example: Manual trigger from a custom element
togglePopup();

closePopup()

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

• Behavior: Sets the chatbot container's display property to none.
• Usage: Used for "Close" buttons or dismiss icons within the chatbot UI to ensure the window is closed.

// Example: Implementation on a dismiss button
closePopup();

DOM Requirements

For the interaction logic to function correctly, the chatbot container must be present in the HTML with the specific ID referenced by the script:

| Requirement | Value | Description | | :--- | :--- | :--- | | Container ID | popup | The script targets document.getElementById('popup'). | | Initial State | display: none | Controlled via the .popup-container CSS class to ensure the bot is hidden on page load. |

Integration Example

The logic is designed to work in tandem with the provided CSS and the WordPress shortcode output. A standard implementation follows this pattern:

<!-- The Trigger Button -->
<div class="circle-button" onclick="togglePopup()">
    <!-- Icon or Text -->
    💬
</div>

<!-- The Chatbot Container -->
<div id="popup" class="popup-container">
    <div class="popup-body">
        <div class="iframe-container">
            <!-- Supervised AI Bot Iframe -->
            <iframe src="YOUR_BOT_URL"></iframe>
        </div>
    </div>
</div>

Visual Transitions

The visibility logic is instantaneous. However, the positioning is handled by the .popup-container class, which anchors the chatbot to the bottom-right of the viewport (bottom: 20px; right: 20px;) with a fixed height of 670px to maintain a consistent user experience across different screen sizes.