Iframe Container Management
Iframe Container Management
The Supervised AI Bot uses a specialized iframe wrapper to ensure the chatbot interface renders correctly and consistently across various WordPress themes. This container manages the dimensions, positioning, and visibility of the AI interface.
Overview
When you use the [supervised_ai_bot] shortcode, the plugin generates a floating popup container at the bottom of the page. This container houses an iframe that loads the specified chatbot URL. To maintain a clean user experience, the container is stripped of standard headers and footers, dedicating the entire viewport of the popup to the chatbot interface.
Dimensions and Constraints
The chatbot container is optimized for a vertical chat experience. The following constraints are applied by default to ensure the bot is accessible without obstructing significant portions of your website content:
- Fixed Height: 670px.
- Standard Width: 400px.
- Maximum Width: 800px (allowing for expansion on wider viewports if customized).
- Border: None (seamless integration).
The iframe is set to occupy 100% of the container's width and height, ensuring that the Supervised AI interface handles its own internal responsiveness.
Positioning and Display
The container utilizes fixed positioning to remain accessible as users scroll through your site content.
| Property | Default Value | Description |
| :--- | :--- | :--- |
| Position | fixed | Stays in the same place even if the page is scrolled. |
| Bottom | 20px | Distance from the bottom edge of the browser window. |
| Right | 20px | Distance from the right edge of the browser window. |
| Z-Index | 1001 | Ensures the bot appears above most standard theme elements. |
Interaction Control
The visibility of the iframe container is managed via a circular trigger button (.circle-button) and specific JavaScript functions.
Triggering the Popup
The plugin includes a global toggle function to open and close the container. While typically handled by the UI button, these functions can be referenced if you are implementing custom triggers:
// Toggles the visibility of the chatbot container
togglePopup();
// Specifically hides the chatbot container
closePopup();
Custom Styling
If you need to override the default dimensions or positioning, you can target the following CSS classes in your theme's stylesheet:
.popup-container: The main wrapper for the chatbot..iframe-container: The specific wrapper for the<iframe>element..circle-button: The floating action button used to launch the bot.
Shortcode Implementation
To render the managed iframe container for a specific bot, use the standard shortcode format:
[supervised_ai_bot id="1"]
Note: The id corresponds to the row number of the bot URL provided in the plugin settings.