JavaScript Interaction

The Supervised AI Bots plugin provides a set of global JavaScript functions that allow you to programmatically control the chatbot interface. These functions are useful if you want to trigger the chatbot from custom buttons, navigation links, or other interactive elements on your WordPress site.

`togglePopup()`

The togglePopup() function acts as a switch for the chatbot window. If the chatbot is currently hidden, calling this function will display it; if it is already open, the function will hide it.

Usage Example:

You can bind this function to a custom HTML element, such as a "Chat with Us" button in your header or sidebar.

<!-- Custom trigger button -->
<button onclick="togglePopup()">
  Open Chatbot
</button>

`closePopup()`

The closePopup() function explicitly hides the chatbot interface, regardless of its current state. Use this function when you need to ensure the chatbot is closed after a specific user action or event.

Usage Example:

If you have a custom overlay or a specific "Close" action in your theme's UI, you can call this function directly.

<!-- Custom close link -->
<a href="javascript:void(0);" onclick="closePopup()">
  Dismiss Chat
</a>

Integration Requirements

For these functions to interact correctly with the chatbot, the following conditions must be met:

Element ID: The chatbot container must have the ID popup. This is the default ID assigned by the plugin's shortcode output.
Script Availability: The custom-popup-script.js must be loaded on the page. The plugin handles this automatically on any page where the chatbot shortcode is active.

Event Handling with CSS

While the JavaScript manages the display state, the visual transitions and positioning are controlled via the popup-container class. If you are customizing the behavior, ensure your styles do not conflict with the display: block and display: none states toggled by these functions.