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., 1 for the first URL, 2 for 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 to display: 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-width of 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 to block.
• Closing the Bot: Clicking the button again or using a close trigger within the interface calls closePopup(), returning the display status to none.