Popup Functionality

The wpai plugin includes a built-in interactive popup system that allows visitors to access the Supervised AI chatbot via a floating interface. This ensures the chatbot is accessible from any page while minimizing screen real estate.

Interaction Overview

The popup operates using a "Floating Action Button" (FAB) model. Users interact with a circular button at the bottom-right of the screen to reveal or hide the chatbot window. This interaction is managed by two primary JavaScript functions.

JavaScript Interface

If you are customizing your theme or adding custom triggers, you can programmatically control the chatbot window using the following global functions:

`togglePopup()`

This function switches the visibility state of the chatbot. If the window is currently hidden, it will be displayed; if it is visible, it will be hidden.

Usage:

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

`closePopup()`

This function explicitly hides the chatbot window regardless of its current state.

Usage:

// Example: Close the popup after a specific user action
closePopup();

UI Components

The popup interface is composed of three main structural elements defined in the plugin's styles:

Customizing Appearance

The popup is styled to be non-intrusive but highly visible. If you need to adjust the positioning or dimensions to match your site's theme, you can override the following CSS properties in your theme's stylesheet:

/* Example: Move the popup to the left side of the screen */
.popup-container, .circle-button {
    right: auto;
    left: 20px;
}

/* Example: Adjust the height of the chat window */
.popup-container, .popup-body, .iframe-container {
    height: 500px;
}

Technical Notes

Z-Index: The popup is set to z-index: 1001 and the button to z-index: 9999 to ensure they appear above standard page content.
Mobile Responsiveness: The container has a max-width of 800px but defaults to a 400px width for standard portrait viewing.