JavaScript Interaction Logic
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
onclickevent 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.
- If the popup is currently hidden, it sets the display to
// 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
#popupelement tonone.
// 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.