Container & Iframe Logic

Container & Iframe Logic

The Supervised AI Bot uses a floating interface design, ensuring the chatbot remains accessible to users as they navigate your site. This is achieved through a fixed-position container and an embedded iframe that scales to fit its parent environment.

Interface Components

The bot interface consists of two primary visual elements:

1. The Trigger Button: A circular floating action button (FAB) that toggles the chat window.
2. The Chat Container: A popup window that hosts the iframe-based chatbot.

Positioning and Layering

To ensure the chatbot is always visible and does not interfere with standard page flow, the plugin uses fixed positioning and specific z-index layering.

| Element | Position | Coordinates | Z-Index | | :--- | :--- | :--- | :--- | | Floating Button | fixed | Bottom: 20px, Right: 20px | 9999 | | Chat Container | fixed | Bottom: 20px, Right: 20px | 1001 |

The high z-index values ensure that the bot remains on the topmost layer of your website, preventing it from being obscured by headers, sidebars, or other overlapping content.

Dimensions and Scaling

The chat window is optimized for a balance between readability and unobtrusiveness. The iframe is contained within a wrapper that controls its dimensions:

• Default Width: 400px (with a maximum expansion of 800px for larger displays).
• Fixed Height: 670px.
• Iframe Scaling: The iframe is set to width: 100% and height: 100% of its container, ensuring the Supervised AI interface fills the entire popup area without scrollbars or clipping.

/* Container dimensions */
.popup-container {
    height: 670px;
    width: 400px;
    max-width: 800px;
}

/* Internal iframe scaling */
.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

Display Control Logic

The visibility of the chatbot is controlled via simple JavaScript functions. While these are handled automatically by the plugin's trigger button, they can be referenced if you are implementing custom buttons or links.

togglePopup()

Toggles the visibility of the chatbot. If the bot is hidden, it will appear; if it is visible, it will be hidden.

// Example: Manual toggle
togglePopup();

closePopup()

Explicitly hides the chatbot container. This is useful for creating "Close" buttons within custom templates.

// Example: Force close the bot window
closePopup();

Responsiveness

The container uses a max-width property and fixed px values for height to maintain a consistent user experience. Because the iframe content is hosted by Supervised AI, the internal chat elements are responsive and will adapt to the 400px width provided by the WordPress plugin container.