Popup Interaction (JS)
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
displayproperty. It toggles betweenblock(visible) andnone(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>
| Function | Parameters | Return Type | Description |
| :--- | :--- | :--- | :--- |
| togglePopup() | None | void | Toggles the chatbot display between block and none. |
| closePopup() | None | void | Sets the chatbot display to none. |