Popup & Toggle Logic

Popup & Toggle Logic

The Supervised AI Bot interface operates as a floating overlay on your WordPress site. The visibility of this overlay is controlled by a lightweight JavaScript utility that manages the state of the chatbot container.

Core Functions

The plugin provides two primary functions to manage the chatbot's visibility. These functions target the popup element ID to switch between visible and hidden states.

togglePopup()

This is the primary function used to switch the visibility of the chatbot.

• Behavior: If the chatbot window is currently visible, calling this function will hide it. If it is hidden, it will display the window.
• Usage: Typically bound to the floating action button (the blue circle) in the bottom-right corner of the screen.

Example Usage:

<!-- Custom trigger for the chatbot -->
<button onclick="togglePopup()">Chat with us</button>

closePopup()

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

• Behavior: Sets the chatbot container's display property to none.
• Usage: Useful for specific "Close" buttons within the UI or for triggering a close event based on other site interactions.

Example Usage:

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

Technical Implementation

The logic interacts with the DOM elements defined in the plugin's structure:

1. Element Targeting: The scripts specifically look for an element with id="popup". This container holds the iframe where the Supervised AI bot is rendered.
2. Display States:
   • display: block: The chatbot is visible to the user.
   • display: none: The chatbot is hidden from view.
3. Z-Index Management: The popup is configured with a high z-index (1001) to ensure it appears above other page content, while the trigger button is set to 9999 to remain accessible at all times.

Custom Triggers

While the plugin includes a default floating action button, you can trigger the chatbot from any HTML element in your theme by adding the onclick attribute with the desired function. This is particularly useful for adding "Support" links in navigation menus or "Chat Now" buttons in the middle of a page.

<!-- Example: Using a navigation menu link to open the bot -->
<li class="menu-item">
    <a href="#" onclick="togglePopup(); return false;">Live Support</a>
</li>