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-indexto 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 toblock. - If the popup is currently visible (
display: block), it sets it tonone.
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
displayproperty tonone.
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:
| Class | Purpose |
| :--- | :--- |
| .popup-container | Controls the dimensions, positioning, and shadow of the chat window. |
| .circle-button | Controls the appearance and positioning of the launch button. |
| .iframe-container | Manages the aspect ratio and containment of the Supervised AI bot iframe. |
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;
}