Popup Mechanism

The Supervised AI Bots plugin features a built-in popup mechanism designed to host the chatbot interface in a non-intrusive floating window. This mechanism allows visitors to open and close the chat interface without leaving the current page.

Overview

The popup interface consists of two primary elements:

1. Floating Action Button (FAB): A circular button (defaulting to the bottom-right corner) that acts as the trigger.
2. Popup Container: A fixed-position window that embeds the Supervised AI chatbot via an iframe.

Interaction Functions

togglePopup()

This function serves as the primary controller for the chat interface. It detects the current state of the popup and alternates its visibility.

• Behavior:
  • If the chat window is hidden, calling this function will display it.
  • If the chat window is already open, calling this function will hide it.
• Usage: This is typically bound to the onclick event of the floating action button (.circle-button).

// Example: Manual trigger from a custom element
<button onclick="togglePopup()">Chat with us</button>

closePopup()

This function provides an explicit way to dismiss the chatbot interface regardless of its current state.

• Behavior: Immediately sets the popup container's display to none.
• Usage: Used internally by "close" or "minimize" icons within the chat interface to ensure the window is hidden.

// Example: Adding a custom close link inside your content
<a href="javascript:void(0)" onclick="closePopup()">Close Chat</a>

CSS Interface

The visual behavior of the popup is managed through specific CSS classes and IDs. You can target these in your theme's stylesheet to customize the appearance.

| Selector | Description | | :--- | :--- | | #popup | The unique ID of the main container managed by the JavaScript functions. | | .popup-container | Controls the dimensions (default 400px x 670px) and fixed positioning. | | .circle-button | Styles the floating trigger button (blue circle by default). | | .iframe-container | Manages the aspect ratio and display of the chatbot iframe. |

Technical Note for Developers

While these functions are global to the page, they rely on a specific HTML structure provided by the plugin. The togglePopup and closePopup functions specifically look for an element with the ID popup.

If you are programmatically interacting with the bot, ensure that the Supervised AI Bot shortcode is present on the page, as it generates the necessary DOM elements that these functions manipulate.