Iframe Display Settings
Iframe Display Settings
The Supervised AI Bot is rendered within a persistent, responsive iframe container designed to provide a non-intrusive chat experience. By default, the chatbot appears as a floating action button (FAB) in the bottom-right corner of the website.
Technical Specifications
The following table outlines the default dimensions and positioning for the chatbot interface:
| Property | Default Value | Description |
| :--- | :--- | :--- |
| Container Height | 670px | Total height of the chat window. |
| Container Width | 400px | Standard width of the chat window. |
| Max Width | 800px | Maximum allowable width for scaling. |
| Positioning | Fixed | Remains in view while the user scrolls. |
| Screen Offset | 20px | Distance from the bottom and right edges of the viewport. |
| Z-Index | 1001 | Ensures the bot appears above most standard site elements. |
Component Behavior
1. The Launcher Button
The chatbot is activated via a circular floating button.
- Dimensions: 60px x 60px.
- Visuals: Blue background (
#007bff) with white text/icons. - Interaction: Clicking this button toggles the visibility of the chatbot iframe.
2. The Chat Container
When active, the iframe container slides into view. To ensure a clean, "app-like" feel, the plugin automatically suppresses standard modal headers and footers, dedicating the entire container space to the Supervised AI interface.
3. Responsive Sizing
The iframe is configured to occupy 100% of its parent container's width and height. While the container has a fixed pixel width for desktop viewing, it is designed to be compatible with modern WordPress themes.
Customizing the Display
If you need to adjust the sizing or positioning to match your theme's layout, you can override the default styles in your theme's CSS or the WordPress Customizer.
Example: Adjusting the Chatbot Dimensions
To make the chatbot taller or wider, target the .popup-container and .iframe-container classes:
/* Customizing the Chatbot window size */
.popup-container,
.iframe-container,
.popup-body {
height: 750px; /* New Height */
width: 450px; /* New Width */
}
/* Adjusting the floating button position */
.circle-button,
.popup-container {
right: 30px;
bottom: 30px;
}
Visibility States
The chatbot interface supports two primary states managed via JavaScript:
- Visible: The
.popup-containeris set todisplay: block. - Hidden: The
.popup-containeris set todisplay: none.
These states are toggled automatically when the user interacts with the launcher button or a close trigger within the bot interface.