Display Logic & Positioning
Display Logic
The Supervised AI Bots plugin utilizes a shortcode-based system to determine when and where a chatbot is rendered. Unlike "global" chat widgets that appear on every page automatically, this plugin gives you granular control over the bot's placement.
Shortcode Integration
To display a chatbot, you must insert a shortcode into the desired WordPress page, post, or widget area. The plugin identifies which bot to load based on the id attribute, which corresponds to the line number of the URL provided in the plugin settings.
Basic Syntax:
[supervised_ai_bot id="1"]
Attribute Details:
- id: (Required) The row number of the chatbot URL in your settings textarea (e.g.,
1for the first URL,2for the second).
Visibility Controls
The chatbot interface is hidden by default upon page load to prevent obstructing your content. It relies on the following logic:
- Initial State: The chatbot container (
.popup-container) is set todisplay: none. - Trigger: A floating circular button (
.circle-button) is rendered on the page. Clicking this button toggles the visibility of the chatbot. - Persistence: The chatbot remains hidden unless manually opened by the visitor.
Positioning & Appearance
The chatbot is designed as a non-intrusive floating widget that overlays your website content. Its position and size are defined via CSS and are consistent across all pages where the shortcode is active.
Screen Placement
The chatbot and its trigger button are anchored to the bottom-right corner of the browser viewport using fixed positioning.
| Element | Vertical Position | Horizontal Position | Z-Index | | :--- | :--- | :--- | :--- | | Trigger Button | 20px from bottom | 20px from right | 9999 | | Chatbot Popup | 20px from bottom | 20px from right | 1001 |
Dimensions
The chatbot window is optimized for a vertical chat experience, ensuring it remains usable on various screen sizes:
- Width: 400px (with a
max-widthof 800px). - Height: Fixed at 670px.
- Interface: The header and footer are hidden by default to maximize the iframe's real estate, focusing entirely on the AI conversation window.
Mobile Responsiveness
Because the container uses position: fixed, it will stay in the bottom-right corner as the user scrolls. Note that on very small mobile devices, the 400px width may fill the horizontal space; the max-width setting ensures the widget does not exceed the container boundaries on larger displays.
User Interaction
The plugin includes a built-in script to handle the display state without requiring page reloads.
- Opening the Bot: Clicking the blue floating circle button calls
togglePopup(), changing the chatbot's display status toblock. - Closing the Bot: Clicking the button again or using a close trigger within the interface calls
closePopup(), returning the display status tonone.