Interactive Logic (JS)

The Supervised AI Bot uses a lightweight JavaScript file (custom-popup-script.js) to manage the visibility of the chatbot interface. This logic controls how the popup window expands or collapses when a user interacts with the floating trigger button.

Core Functions

You can utilize these functions to programmatically control the chatbot window from anywhere in your WordPress theme or custom HTML blocks.

`togglePopup()`

This is the primary function used to switch the state of the chatbot window. If the window is currently hidden, calling this function will display it; if it is visible, it will hide it.

Behavior: Toggles the display style property of the element with the ID popup.
Use Case: Typically assigned to the onclick attribute of the floating circle button.

`closePopup()`

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

Behavior: Sets the display style property of the element with the ID popup to none.
Use Case: Useful for "Close" or "X" buttons inside the chatbot header or for closing the bot when a user navigates away or completes a specific action.

Implementation Example

The plugin automatically handles the connection between the UI and these functions. However, if you are building a custom UI or a text link to launch the bot, you can use the following patterns:

Custom Launch Button

To create a custom button in your content that opens the bot:

<button onclick="togglePopup()" class="my-custom-btn">
    Chat with our AI
</button>

Custom Close Link

To provide a manual close link inside a custom container:

<a href="javascript:void(0);" onclick="closePopup()">Minimize Chat</a>

Integration Details

Note: These functions expect an HTML element with the ID popup to exist in the DOM. This element is generated automatically by the [supervised_ai_bot] shortcode. If you are customizing the template, ensure this ID remains intact for the interactivity to function.