JavaScript Interaction Logic

The wpai plugin utilizes a lightweight JavaScript file, custom-popup-script.js, to manage the client-side behavior of the chatbot interface. This logic controls the visibility of the chatbot container, allowing users to open and close the chat window without refreshing the page.

Overview

The interaction logic is centered around two primary functions that manipulate the display state of the chatbot's DOM element (identified by the ID popup). These functions are typically triggered by user interactions, such as clicking the floating action button.

Functions

`togglePopup()`

This function acts as a switch to show or hide the chatbot interface. It checks the current CSS display property of the chatbot container and alternates its state.

Usage: Typically bound to the onclick event of the floating circle button.
Behavior:
- If the popup is currently hidden, it sets the display to block.
- If the popup is currently visible, it sets the display to none.

// Example: Triggering a toggle via an HTML element
<div class="circle-button" onclick="togglePopup()">
    <!-- Icon or Button Content -->
</div>

`closePopup()`

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

Usage: Used when a specific "close" action is required, such as a close button inside the chat header or an overlay click.
Behavior: Sets the display property of the #popup element to none.

// Example: A manual close button
<button onclick="closePopup()">Close Chat</button>

Element Requirements

For the interaction logic to function correctly, the WordPress theme must output a container element with the following ID:

| ID | Description | | :--- | :--- | | popup | The main wrapper for the chatbot iframe and its styling. |

Integration Details

The script is automatically enqueued by the plugin. It targets the DOM directly, so no external dependencies (like jQuery) are required for these specific interaction functions. The styles defined in custom-popup-style.css complement these functions by providing the transitions and positioning necessary for the "popup" effect.