Iframe Container Logic

Iframe Rendering Mechanism

The Supervised AI Bot is rendered within a secure, isolated iframe to ensure that the chatbot interface remains independent of your WordPress theme's styles and scripts. This sandboxing approach prevents CSS conflicts and provides a consistent user experience across different site configurations.

Container Structure

The chatbot interface consists of three primary layers:

1. Floating Action Button (FAB): A fixed circular button (.circle-button) that serves as the primary toggle for the chat interface.
2. Popup Container: A hidden-by-default wrapper (.popup-container) that houses the iframe and manages the display state.
3. Iframe Container: The specific wrapper (.iframe-container) that ensures the iframe maintains a responsive 100% height and width relative to its parent.

Interaction Logic

The visibility of the iframe is controlled via simple JavaScript triggers. While these are handled automatically by the plugin, understanding the hooks allows for manual integration if required.

Toggling the Bot

To programmatically open or close the chatbot, the plugin utilizes the togglePopup() function. This function switches the display state of the container between block and none.

// Example: Manually toggling the chatbot from a custom button
document.getElementById('my-custom-button').addEventListener('click', function() {
    togglePopup();
});

Closing the Bot

The closePopup() function explicitly sets the container to display: none, effectively hiding the chatbot interface.

Dimensions and Styling

The iframe container is pre-configured with the following default dimensions to ensure optimal chat performance:

| Property | Default Value | Description | | :--- | :--- | :--- | | Height | 670px | Fixed height for the chat window. | | Width | 400px | Standard width, expandable up to 800px via CSS. | | Position | Fixed | Anchored to the bottom-right corner of the viewport. | | Z-Index | 1001+ | Ensures the bot appears above other page elements. |

Responsive Behavior

The container uses a max-width: 800px constraint. While the default width is 400px, the iframe is designed to fill the available horizontal space within its container, allowing it to adapt to wider layouts if the CSS is customized.

To customize the container's appearance, you can target the following CSS classes in your theme's stylesheet:

/* Customizing the chatbot container size */
.popup-container {
    height: 600px; /* Overriding default height */
    width: 350px;  /* Overriding default width */
}

/* Adjusting the floating button color */
.circle-button {
    background-color: #your-hex-code;
}

Security and Sandbox

The iframe loads the URL provided in the plugin settings via a secure connection. The use of an absolute positioning strategy within the .iframe-container ensures that the bot does not interfere with the document flow of your WordPress pages or posts.