Interactions & Scripting

Client-Side Interaction Logic

The Supervised AI Bot uses a lightweight JavaScript controller to manage the visibility and state of the chat interface. This allows visitors to interact with the chatbot overlay without page reloads.

Core Interaction Functions

The plugin exposes two primary functions to manage the chatbot popup. These are used by the default floating launcher but can also be called by custom UI elements within your WordPress theme.

togglePopup()

This function acts as a switch for the chat window. It checks the current display state of the chatbot and reverses it.

• Behavior:
  • If the chatbot is hidden, it sets the display to block.
  • If the chatbot is visible, it sets the display to none.
• Usage: Typically attached to the floating action button (launcher).

// Example: Triggering the toggle via a custom button
document.querySelector('#my-custom-button').addEventListener('click', function() {
    togglePopup();
});

closePopup()

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

• Behavior: Sets the chatbot container's display property to none.
• Usage: Used for "close" icons or "dismiss" actions within the chat interface.

<!-- Example: A custom close link inside the chat area -->
<a href="javascript:void(0)" onclick="closePopup()">Minimize Chat</a>

UI Components and Selectors

The scripting logic relies on specific DOM elements generated by the plugin. If you are customizing your theme's CSS or HTML, ensure the following ID remains intact:

| Element ID | Description | | :--- | :--- | | popup | The main container for the chatbot iframe and overlay. This is the target of the togglePopup and closePopup functions. |

Integration with Custom Elements

You can trigger the Supervised AI Bot from any part of your WordPress site (such as a navigation menu item or a call-to-action button) by invoking the global JavaScript functions.

Example: Trigger from a Navigation Menu To open the bot from a standard WordPress menu link, add the following to the "Link Relationship (XFN)" or as a custom URL:

javascript:togglePopup();

Event Lifecycle

1. Initialization: The script remains idle until a user interaction occurs.
2. State Management: The visibility state is handled directly via inline style manipulation of the display property, ensuring high compatibility with various WordPress themes and minimizing conflicts with external CSS frameworks.
3. Iframe Loading: The chatbot content within the iframe loads independently to ensure the main page performance is not impacted by the bot's initialization.