Interaction & Behavior

Interaction & Behavior

The Supervised AI Bots plugin utilizes a floating action button (FAB) interface to manage user engagement. This ensures the chatbot is accessible from any page while minimizing intrusion into the site's content.

Floating Launcher

Upon activation via shortcode, a blue circular button appears in the bottom-right corner of the viewport. This serves as the primary interaction point for visitors.

• Position: Fixed (bottom-right).
• Visual Style: 60px circular button with a high z-index to ensure it remains above other page elements.

Chatbot Container

When triggered, the chatbot opens in a dedicated popup container.

• Dimensions: The window is optimized for mobile and desktop viewing with a fixed height of 670px and a width of 400px.
• Responsive Behavior: The container uses fixed positioning to stay pinned to the bottom-right corner, ensuring the chat interface remains consistent even as the user scrolls.
• Loading: The chatbot content is loaded dynamically via an iframe within this container.

Trigger Logic

The plugin uses a simple toggle system to manage the visibility of the chat interface. While these functions are handled automatically by the plugin's UI, they can be referenced for custom integrations:

togglePopup()

This function controls the primary visibility state of the chatbot.

• Behavior: If the chatbot window is currently hidden, calling this function will display it. If it is already visible, it will hide it.
• Usage: Automatically bound to the floating circular button.

closePopup()

This function explicitly hides the chatbot interface.

• Behavior: Forces the display state to none, regardless of the current state.
• Usage: Used for "Close" actions or whenever the chat session needs to be terminated by a UI event.

Implementation Example

If you are developing custom themes or scripts and need to manually trigger the chatbot visibility, you can invoke the global functions provided by the plugin:

// Example: Open or close the bot from a custom navigation link
const myContactLink = document.querySelector('#contact-bot-link');

myContactLink.addEventListener('click', function(e) {
    e.preventDefault();
    if (typeof togglePopup === "function") {
        togglePopup();
    }
});

CSS Customization

The layout behavior is governed by specific CSS classes. If you need to adjust the positioning or dimensions, you can override the following classes in your theme’s stylesheet:

• .popup-container: Controls the chat window's size and position.
• .circle-button: Controls the appearance and location of the launcher.
• .iframe-container: Manages the wrapper for the chatbot iframe.