Embedding Logic

Embedding Logic

The Supervised AI Bots plugin utilizes a straightforward mapping system to convert provided bot URLs into interactive frontend components. This logic allows administrators to manage multiple bot instances from a single settings page and deploy them selectively across a WordPress site using shortcodes.

URL Indexing

In the plugin settings dashboard, URLs are stored in a plain-text list (one URL per line). The plugin interprets this list as a numerical index starting at 1.

• Row 1: https://your-bot-url-1.com $\rightarrow$ id="1"
• Row 2: https://your-bot-url-2.com $\rightarrow$ id="2"

Shortcode Implementation

To embed a bot into a post, page, or widget area, use the [supervised_ai_bot] shortcode with the corresponding id attribute.

<!-- Embed the first bot in the list -->
[supervised_ai_bot id="1"]

<!-- Embed the second bot in the list -->
[supervised_ai_bot id="2"]

The Popup Interface

When the shortcode is processed, the plugin generates a standardized HTML structure consisting of a floating trigger button and a hidden iframe container.

1. Trigger Button: A circular floating action button (FAB) is placed at the bottom-right of the screen.
2. Iframe Container: The bot URL is loaded within an <iframe> inside a hidden div container.
3. Dimensions: By default, the bot interface is constrained to a width of 400px (max-width 800px) and a height of 670px to ensure compatibility with most chatbot interfaces.

Interaction Logic (JavaScript)

The frontend behavior is managed by a lightweight script that toggles the visibility of the bot container. While these functions are handled automatically by the plugin's UI, they can be referenced for custom implementations:

| Function | Action | | :--- | :--- | | togglePopup() | Switches the bot window between display: block and display: none. | | closePopup() | Forces the bot window to close. |

Visual Layout

The embedding logic uses CSS to ensure the bot overlays site content without breaking the page layout. The logic relies on fixed positioning:

• Z-Index: The bot is set to z-index: 1001 and the trigger button to z-index: 9999 to ensure they appear above other theme elements.
• Responsiveness: The iframe is set to 100% width and height of its parent container to ensure the Supervised AI interface scales correctly within the popup.