Frontend Scripting
Overview
The wpai plugin uses a lightweight JavaScript controller, custom-popup-script.js, to manage the state of the chatbot interface. This script handles the visibility of the chatbot iframe, ensuring a seamless transition between the floating action button (launcher) and the chat window.
The frontend scripting relies on the presence of an element with the ID popup (the container) to execute visibility transitions.
Global Functions
The following functions are available globally and can be used to programmatically control the chatbot window.
togglePopup()
The primary event handler used to switch the chatbot's visibility state. When called, it checks the current CSS display property of the chatbot container.
- Action:
- If the chatbot is visible (
display: block), it hides it. - If the chatbot is hidden, it displays it.
- If the chatbot is visible (
- Usage Example:
This function is typically bound to the
onclickevent of the floating circle button.
<!-- Example of manual trigger implementation -->
<button onclick="togglePopup()">Chat with us</button>
closePopup()
A specialized function to ensure the chatbot window is hidden. Unlike togglePopup, this function is idempotent—calling it multiple times will not reopen the window.
- Action: Sets the chatbot container's
displayproperty tonone. - Usage Example: Use this function if you implement a custom "Close" or "Minimize" button inside your WordPress theme or within the chatbot header area.
// Close the chatbot programmatically after a specific user action
document.querySelector('.custom-close-btn').addEventListener('click', function() {
closePopup();
});
DOM Integration
To function correctly, the script expects a specific DOM structure provided by the plugin's shortcode. It targets the following element:
| Element ID | Role | Expected Style |
| :--- | :--- | :--- |
| popup | The main container (.popup-container) housing the chatbot iframe. | display: none (hidden by default) |
State Management Logic
The script interacts with the DOM using the following logic flow:
- Detection: The script identifies the container using
document.getElementById('popup'). - Evaluation: It checks the
style.displayproperty. - Execution: It updates the inline style to either
blockornone, which is then animated/styled via the accompanyingcustom-popup-style.css.
Custom Event Handling
While the plugin handles the default "Floating Button" click, developers can trigger these functions from other parts of the UI (such as a navigation menu link or a call-to-action button) by calling the functions directly in the browser's global scope.
Example: Open Chatbot from a Navigation Link
<a href="javascript:void(0);" onclick="togglePopup()">Support Chat</a>
Technical Notes
- Dependencies: None. This script uses vanilla JavaScript and does not require jQuery.
- Scope: Functions are defined in the global scope to ensure compatibility with WordPress HTML attributes (
onclick). - Z-Index: The UI state changes managed by these scripts work in tandem with a high
z-index(1001+) defined in the CSS to ensure the chatbot appears above all other site elements.