JavaScript Logic (custom-popup-script)

JavaScript Logic (custom-popup-script.js)

The JavaScript logic manages the interactive states of the Supervised AI chatbot interface. It controls the visibility of the chat window, allowing users to open and close the bot via the frontend UI.

Public Interface

The script exposes two primary functions for controlling the chatbot popup. These are designed to be used as event handlers for UI elements like floating buttons or close icons.

togglePopup()

This function acts as a switch to alternate the visibility of the chatbot window.

• Usage: Typically bound to the floating action button (the circle button) that remains visible on the page.
• Behavior:
  • Checks the current display status of the element with the ID popup.
  • If the window is hidden, it sets the display to block.
  • If the window is visible, it sets the display to none.

Example Usage:

<!-- Attaching the toggle function to a custom trigger -->
<button onclick="togglePopup()">Chat with AI</button>

closePopup()

This function provides an explicit command to hide the chatbot window.

• Usage: Used for "Close" or "X" buttons inside the chat interface, or to programmatically dismiss the chat after specific user interactions.
• Behavior: Immediately sets the display property of the element with the ID popup to none.

Example Usage:

// Example: Automatically closing the popup after a certain event
if (userFinishedInteraction) {
    closePopup();
}

Technical Summary

| Function | Parameters | Return Type | Description | | :--- | :--- | :--- | :--- | | togglePopup() | None | void | Swaps the visibility state of the chatbot container. | | closePopup() | None | void | Ensures the chatbot container is hidden. |

DOM Requirements

For the script to function, the chatbot container must be rendered with the ID popup. This is handled automatically by the [supervised_ai_bot] shortcode provided by the plugin. If the ID is missing or modified, these functions will fail to find the target element.