UI Components

Interface Overview

The Supervised AI Bots plugin provides a minimalist, floating interface designed to minimize intrusion while maintaining accessibility. The UI consists of two primary elements: a Floating Action Button (FAB) and a Popup Container that hosts the chatbot iframe.

Component Details

1. Chat Launcher (Circle Button)

The launcher is the primary entry point for users to interact with the chatbot. It is styled as a blue circular button that remains fixed to the viewport.

• CSS Class: .circle-button
• Position: Fixed at the bottom-right corner (bottom: 20px; right: 20px).
• Visual Style: 60x60px blue circle with a centered white icon/text and a subtle drop shadow for depth.
• Z-Index: 9999 (Ensures it stays above most theme elements).

2. Popup Container

The popup container is the window that houses the chatbot interface. It is hidden by default and appears when the launcher is triggered.

• CSS Class: .popup-container
• Default Dimensions:
  • Width: 400px (Responsive up to 800px).
  • Height: 670px.
• Behavior: Uses a fixed position at the bottom-right. It features rounded corners (10px) and a box-shadow to differentiate the chat window from the website background.
• Header/Footer: The internal header and footer elements are hidden by default (display: none) to maximize the space available for the AI conversation.

3. Iframe Container

The chatbot itself is loaded dynamically via an <iframe> within a specialized container. This ensures that the Supervised AI bot is isolated from the site’s CSS, preventing style bleeding.

• CSS Class: .iframe-container
• Implementation:

  <div class="iframe-container">
      <iframe src="[YOUR_BOT_URL]" frameborder="0"></iframe>
  </div>
  

• Properties: The iframe is set to 100% width and height of the container to provide a seamless full-window experience within the popup.

JavaScript Interaction API

While the plugin handles most interactions automatically, the following functions control the visibility of the UI components:

togglePopup()

The primary function used to switch the visibility of the chat window.

• Logic:
  • If the popup is currently visible (display: block), it hides it.
  • If the popup is hidden, it displays it.
• Usage Example:

  // Manually trigger the chatbot popup from a custom button
  document.querySelector('#my-custom-button').addEventListener('click', function() {
      togglePopup();
  });
  

closePopup()

Specifically targets and hides the chatbot window regardless of its current state.

• Logic: Sets the popup container's display property to none.
• Usage Example:

  // Close the popup programmatically
  closePopup();
  

Customization Notes

CSS Overrides

To modify the appearance of the chat components (e.g., changing the button color or popup size), you can target the classes in your WordPress theme's "Additional CSS" section:

/* Example: Change the launcher button to green */
.circle-button {
    background-color: #28a745 !important;
}

/* Example: Adjust the popup height for smaller screens */
@media (max-height: 700px) {
    .popup-container {
        height: 500px;
    }
}