Popup Mechanics

Popup Mechanics

The wpai 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.

The interaction is driven by two primary functions that manipulate the DOM state of the chatbot container.

Interaction Logic

The popup behavior is governed by the state of the element with the ID popup. By default, this container is hidden (display: none) and is toggled via user interaction with the floating action button (the .circle-button).

togglePopup()

The togglePopup function serves as the primary toggle switch for the chatbot interface. It evaluates the current CSS display property of the chatbot container and switches it between visible and hidden states.

• Behavior:
  • If the chatbot is currently visible (block), calling this function hides it.
  • If the chatbot is currently hidden, calling this function displays it.
• Usage: This is typically bound to the onclick event of the floating chat bubble icon.

// Example: Manual trigger from a custom button
<button onclick="togglePopup()">Chat with us</button>

closePopup()

The closePopup function provides an explicit way to dismiss the chatbot window. Unlike togglePopup, this function only performs a hide action, ensuring the interface is closed regardless of its previous state.

• Behavior: Sets the chatbot container's display style to none.
• Usage: Used for "Close" buttons or dismiss icons within the chatbot UI to provide a clear exit point for the user.

// Example: Explicitly closing the popup from a custom script
function onFormSubmit() {
    // Logic to process form...
    closePopup(); // Closes the bot window after an action is completed
}

Visual Specifications

When the popup is active, it adheres to the following default dimensions and positions defined in the plugin's stylesheet. These are important to consider if you are layering other UI elements on your WordPress site:

| Property | Default Value | Description | | :--- | :--- | :--- | | Position | Fixed | Stays anchored relative to the viewport. | | Placement | Bottom: 20px, Right: 20px | Standard bottom-right placement. | | Width | 400px | Optimized for mobile and desktop chat. | | Height | 670px | Fixed height to maintain iframe consistency. | | Z-Index | 1001+ | Ensures the chat sits above most theme elements. |

Integration Note

Both functions target an element with the hardcoded ID popup. When creating custom templates or extending the plugin, ensure that your main chatbot container maintains this ID to remain compatible with the JavaScript controller:

<!-- Required structure for JS compatibility -->
<div id="popup" class="popup-container">
    <div class="iframe-container">
        <!-- Chatbot Iframe -->
    </div>
</div>