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-container is set to display: block.
• Hidden: The .popup-container is set to display: none.

These states are toggled automatically when the user interacts with the launcher button or a close trigger within the bot interface.