The Floating Popup System
The Floating Popup System
The Supervised AI Bots plugin features a non-intrusive, floating interface that allows visitors to interact with your AI chatbots without leaving their current page. This system consists of a launcher button and a responsive popup container.
Overview
Once a bot is embedded via shortcode, the system injects a persistent floating action button (FAB) into the bottom-right corner of the webpage. This button acts as the toggle for the AI chat interface.
Component Behavior
1. The Floating Launcher
The launcher is a blue circular button that remains fixed in the bottom-right corner of the browser window.
- Accessibility: It stays on top of other page elements (Z-index: 9999).
- Action: Clicking the button triggers the
togglePopup()function, which opens or closes the chatbot window.
2. The Chat Popup Container
The popup container houses the Supervised AI interface within an iframe.
- Dimensions: The window is optimized for chat at a width of
400px(expandable up to800px) and a fixed height of670px. - Positioning: Like the launcher, it is pinned to the bottom-right to ensure it is easily reachable on both desktop and mobile views.
- Visibility: The container is hidden by default and only appears when the user interacts with the launcher.
Frontend Usage
To enable the floating popup system on a specific page or post, use the provided shortcode. The system automatically handles the rendering of the button and the initialization of the iframe.
[supervised_ai_bot id="1"]
- id: Corresponds to the row number of the Bot URL saved in your plugin settings.
Interaction Logic
The system is designed to be lightweight and user-friendly:
- Toggling: Users can open the bot to ask a question and click the same button to minimize it. The state is handled via the
togglePopup()utility. - Seamless Integration: The iframe container uses a borderless design to make the chatbot feel like a native part of your WordPress theme.
Technical Specifications for UI
If you are styling your site around the chatbot, please note the following frontend specifications:
| Feature | Specification | | :--- | :--- | | Default Position | Bottom-Right (20px offset) | | Window Dimensions | 400px (W) x 670px (H) | | Z-Index | 1001 (Popup), 9999 (Button) | | Theme Color | #007bff (Standard Blue) | | Typography | Arial, Sans-Serif |