Interaction Behaviors

Frontend Interaction Behaviors

The Supervised AI Bots plugin utilizes a lightweight client-side script to manage the visibility and state of the chatbot widget. This ensures a seamless experience for visitors as they interact with the AI assistant on your WordPress site.

Triggering the Chatbot

The chatbot interface is toggled via a floating action button (a circular blue icon) located at the bottom-right corner of the screen. This button acts as the primary entry point for user interaction.

JavaScript Functions

The following functions control the widget's visibility. These can be referenced if you are implementing custom buttons or links within your theme to open the chat window.

`togglePopup()`

This function switches the visibility state of the chatbot container. If the chatbot is currently hidden, it will be displayed; if it is already open, it will be closed.

Logic: Checks the display property of the element with ID popup.

Usage Example:

<!-- Example of a custom button to toggle the chat -->
<button onclick="togglePopup()">Chat with us</button>

`closePopup()`

This function explicitly hides the chatbot interface regardless of its current state. It is used to ensure the widget is removed from the user's view.

Logic: Sets the display property of the element with ID popup to none.

Usage Example:

// Programmatically close the popup after a specific user action
closePopup();

Container Behavior

The interaction follows specific UI/UX patterns defined in the plugin's stylesheet:

Fixed Positioning: The chatbot remains anchored to the bottom-right corner (bottom: 20px, right: 20px) as the user scrolls, ensuring it is always accessible.
Layering: The interaction button and popup container use high z-index values (up to 9999) to ensure they appear above other theme elements, such as navigation bars or footers.
Iframe Loading: When the popup is toggled open, the Supervised AI interface is loaded within a secure iframe. This keeps the chatbot's processing independent of your site's performance and prevents style conflicts.

Visibility States