Popup Interaction (JS)

The Supervised AI Bots plugin utilizes a lightweight JavaScript utility to manage the visibility of the chat interface. These functions can be used to programmatically control the chatbot window from other parts of your website, such as custom navigation links or call-to-action buttons.

Core Functions

The following functions are globally available once the plugin is active:

`togglePopup()`

This function alternates the visibility of the chatbot window. If the chatbot is currently hidden, calling this function will display it; if it is already visible, the function will hide it.

Usage Example:

<!-- Trigger the chat from a custom button in your content -->
<button onclick="togglePopup()">
    Need Help? Chat with us!
</button>

`closePopup()`

This function explicitly hides the chatbot window regardless of its current state. It is used internally by the interface's "close" mechanisms but can be triggered by external events.

Usage Example:

// Example: Close the chat window automatically after a specific user action
function onFormSubmission() {
    closePopup();
    console.log("Chat window closed after form submission.");
}

Technical Requirements

For these functions to interact correctly with the chatbot interface, ensure your implementation adheres to the following:

Element ID: The functions specifically target an HTML element with the ID popup.
CSS State: The logic relies on the display property. It toggles between block (visible) and none (hidden).
Z-Index: The default chat container is configured with a high z-index (1001) to ensure it appears above other page elements when toggled.

Custom Integration Example

If you wish to trigger the chatbot from a standard WordPress menu item, you can add the function call to the onclick attribute of your anchor tag:

<a href="javascript:void(0);" onclick="togglePopup();">Open Support Chat</a>