JavaScript Interactivity

The wpai plugin utilizes a dedicated JavaScript file (custom-popup-script.js) to manage the state of the chatbot interface. This script provides a simple public interface to handle opening, closing, and toggling the chatbot popup without requiring manual CSS manipulation.

Core Functions

The following functions are available globally once the plugin is active and can be used to control the chatbot UI.

`togglePopup()`

This function serves as the primary trigger for the chatbot window. It checks the current visibility of the chatbot and switches its state.

Behavior: If the popup is currently hidden, it will be displayed. If it is already open, it will be closed.
Use Case: Best used for the main floating action button (FAB) or a navigation menu link.

Example Usage:

<!-- Trigger the popup toggle from a custom button -->
<button onclick="togglePopup()">
    Chat with us
</button>

`closePopup()`

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

Behavior: Sets the popup display to hidden.
Use Case: Best used for "close" icons, "X" buttons inside the chatbot header, or "Cancel" buttons.

Example Usage:

<!-- An explicit close button inside the UI -->
<span class="close-icon" onclick="closePopup()">
    &times;
</span>

Element Requirements

For these functions to interact correctly with the DOM, the chatbot container must use the following ID:

| ID | Description | | :--- | :--- | | popup | The top-level container element for the chatbot iframe and styles. |

Integration Details

While these functions are managed internally by the plugin's shortcode output, they are available for developers who wish to trigger the chatbot from custom UI elements elsewhere on the page.