Interaction Mechanics

Overview

The Supervised AI Bot interface is designed as a non-intrusive, floating widget. By default, it appears as a circular action button in the bottom-right corner of the webpage. Users interact with this button to expand or collapse the chatbot interface.

User Interface Elements

Floating Action Button

The chatbot is initiated via a .circle-button element. This button remains fixed to the viewport, ensuring users can access support from any scroll depth.

Default Position: 20px from the bottom and 20px from the right.
Visual Style: A blue circle containing the chat trigger icon.

Chat Window (Popup)

The chatbot interface resides within a .popup-container. When active, it displays the configured Supervised AI bot within an iframe.

Dimensions: 400px (width) by 670px (height).
Behavior: Overlays site content with a high z-index to ensure visibility.

Interaction Functions

The plugin provides two primary JavaScript functions to manage the visibility of the chatbot interface. These can be utilized for custom event handling or manual triggers.

`togglePopup()`

This function serves as the primary switch for the chatbot interface. It checks the current state of the popup and alternates between visible and hidden.

Usage Example:

// Manually toggle the chatbot window
togglePopup();

Behavior:

If the popup is currently hidden (display: none), it sets it to block.
If the popup is currently visible (display: block), it sets it to none.

`closePopup()`

This function explicitly hides the chatbot interface, regardless of its current state. It is typically used for "Close" buttons or when a specific user action should terminate the chat session visibility.

Usage Example:

// Explicitly hide the chatbot window
closePopup();

Behavior:

Sets the popup container’s display property to none.

Custom Styling and Behavior

The interaction mechanics are governed by CSS transitions and visibility states. Developers looking to modify the appearance or positioning can override the following classes in their theme's stylesheet:

Example: Adjusting Position

If you wish to move the chatbot to the left side of the screen, you can apply the following CSS:

.circle-button, .popup-container {
    right: auto;
    left: 20px;
}