Frontend Scripting logic

Frontend Scripting Logic

The wpai plugin utilizes a lightweight JavaScript implementation to manage the interactivity of the chatbot interface. This logic primarily controls the visibility states of the chatbot modal, ensuring a smooth user experience when transitioning between the collapsed "floating button" state and the expanded chat window.

Overview of Functionality

The script interacts with the DOM to toggle the display properties of the chatbot container. By default, the chatbot is rendered in a hidden state and is invoked through user interaction with a trigger element (such as the circular chat button).

Core Functions

togglePopup()

This is the primary function used to switch the visibility of the chatbot interface. It checks the current display state of the chatbot container and alternates it between visible and hidden.

• Behavior:
  • If the modal is currently hidden, it sets the display to block.
  • If the modal is currently visible, it sets the display to none.
• Usage: Usually bound to the onclick event of the floating action button (the .circle-button element).

// Example: Manually triggering the toggle from a custom button
document.querySelector('#my-custom-button').addEventListener('click', function() {
    togglePopup();
});

closePopup()

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

• Behavior: Sets the display property of the element with the ID popup to none.
• Usage: Used for "close" icons within the chat header or programmatically closing the window after specific user actions.

// Example: Closing the popup programmatically
closePopup();

Component Integration

The scripting logic relies on specific ID and Class selectors defined in the plugin's frontend template:

| Element ID/Class | Role | | :--- | :--- | | id="popup" | The main container for the chatbot iframe. This is the target of the script's display manipulation. | | .circle-button | The floating UI element that serves as the trigger for the togglePopup() function. | | .iframe-container | An internal wrapper that ensures the Supervised AI iframe maintains its aspect ratio and responsiveness within the modal. |

Event Handling

While the script is loaded globally on pages where the shortcode is present, it is designed to be non-blocking. The functions are scoped to the window object, allowing developers to trigger the chatbot from external elements (like a navigation link or a "Contact Us" button) by calling togglePopup() directly in the browser console or custom site scripts.

Implementation Note

The script targets an element with the hardcoded ID of popup. When implementing custom templates or modifying styles, ensure that the chatbot container maintains this ID to prevent breaking the toggle functionality.