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.
• Usage Example: This function is typically bound to the onclick event 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 display property to none.
• 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:

1. Detection: The script identifies the container using document.getElementById('popup').
2. Evaluation: It checks the style.display property.
3. Execution: It updates the inline style to either block or none, which is then animated/styled via the accompanying custom-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.