Iframe Container Layout

Iframe Container Layout

The Supervised AI Bot is rendered within a specialized iframe container designed to provide a seamless, non-intrusive chat experience. By default, the chatbot appears as a floating interface in the bottom-right corner of your website.

Default Dimensions and Positioning

The container is optimized to balance visibility with site usability. The default layout specifications are:

| Property | Value | Description | | :--- | :--- | :--- | | Width | 400px | The fixed width of the chat window. | | Height | 670px | The fixed height of the chat window. | | Position | Fixed | Stays in place relative to the viewport while scrolling. | | Offset | 20px | Distance from the bottom and right edges of the screen. | | Z-Index | 1001+ | Ensures the bot appears above standard page content. |

Handling Overflow and Responsiveness

To ensure the chat interface remains clean and professional, the plugin manages overflow and iframe behavior through the following settings:

• Internal Scrolling: The .iframe-container is set to overflow: hidden. This prevents the emergence of double scrollbars on your website; all scrolling is handled internally by the chatbot interface itself.
• Full-Height Scaling: The iframe within the container is set to 100% width and height, ensuring the Supervised AI interface fills the entire allotted container area without borders or gaps.
• Boundary Constraints: The container uses a max-width: 800px setting to ensure that if the container is manually resized or viewed on specific displays, the layout does not break the user experience.

Customizing the Layout

While the plugin provides these defaults out of the box, you can override the layout by adding custom CSS to your WordPress theme.

Example: Adjusting the Chat Window Size If you wish to make the chat window smaller for mobile-first sites, you can target the following classes:

/* Adjust the main popup container */
.popup-container {
    width: 350px;
    height: 600px;
}

/* Ensure the iframe container matches the new height */
.iframe-container {
    height: 600px;
}

Visibility Control

The layout is toggled via the floating action button (the "Circle Button").

• Active State: The container is displayed and the chatbot is ready for interaction.
• Hidden State: The container is removed from the view (display: none), leaving only the launch button visible to the user.