The Popup Interface

The Popup Interface

The Supervised AI Chatbot utilizes a modern, non-intrusive floating interface. This allows visitors to interact with your AI assistant without leaving the current page or disrupting their browsing experience.

The Floating Action Button (FAB)

By default, the plugin renders a circular blue action button in the bottom-right corner of the browser window. This button serves as the primary toggle for the chat interface.

• Position: Fixed to the bottom-right (20px from the bottom and right edges).
• Visibility: The button remains visible and stays on top of other page elements (Z-index: 9999) to ensure users can always find support.

The Chat Overlay

When the floating button is clicked, the chatbot interface expands into a sleek popup container.

• Dimensions: The chat window is optimized for readability with a fixed height of 670px and a standard width of 400px.
• Responsive Container: While the default width is 400px, the interface is designed to be flexible up to a maximum width of 800px depending on the site's layout.
• Iframe Integration: The chatbot content is loaded via a secure iframe, ensuring that the bot's styles and scripts do not conflict with your WordPress theme.

Interaction and Controls

The interface can be controlled through user interaction or programmatically via the included JavaScript functions.

Manual Interaction

• Opening: Click the floating circular button to display the chat window.
• Closing: Click the button again to hide the window.

Programmatic Control

If you are a developer looking to trigger the popup from custom buttons or links (e.g., a "Chat with us" link in your footer), you can utilize the following global functions:

| Function | Description | | :--- | :--- | | togglePopup() | Toggles the visibility of the chatbot between 'block' (visible) and 'none' (hidden). | | closePopup() | Forces the chatbot window to close. |

Example Usage: To trigger the chatbot from a standard HTML link, you can call the function directly in an onclick attribute:

<a href="javascript:void(0);" onclick="togglePopup()">
  Click here to chat with our AI
</a>

Visual Customization

The interface is styled using standard CSS classes. Advanced users can override these styles in their theme's stylesheet to match their brand colors:

• .circle-button: Styles the floating launcher.
• .popup-container: Styles the main chat window wrapper.
• .iframe-container: Manages the scaling and display of the chatbot iframe.