Iframe & Container Sizing

Customizing Iframe & Container Sizing

By default, the Supervised AI chatbot appears in a fixed-position popup container optimized for most desktop and mobile views. However, you may wish to adjust the dimensions to better fit your website's design or to provide a larger interaction area for your users.

Default Dimensions

The plugin uses the following default dimensions for the chatbot interface:

• Width: 400px
• Height: 670px
• Max-Width: 800px (to prevent overflow on extremely wide custom configurations)
• Floating Button: 60px x 60px

Adjusting Chatbot Size via CSS

To change the size of the chatbot, you can override the default styles by adding custom CSS to your WordPress theme (typically found under Appearance > Customize > Additional CSS).

When adjusting the height, ensure you update the .popup-container, .popup-body, and .iframe-container classes simultaneously to maintain layout consistency.

/* Example: Increasing the size of the chatbot window */
.popup-container {
    width: 450px;      /* Default is 400px */
    height: 750px;     /* Default is 670px */
}

.popup-body, 
.iframe-container {
    height: 750px;     /* Must match the container height */
}

Responsive Behavior

The chatbot container is designed to stay anchored to the bottom-right of the viewport. To ensure the chatbot remains usable on smaller mobile screens, it is recommended to use max-width or media queries if you choose to increase the default width.

/* Example: Ensuring responsiveness on mobile devices */
@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        bottom: 80px;
    }
}

Modifying the Launcher Button

The floating "circle button" used to toggle the chatbot can also be resized. If you change the dimensions, you should also adjust the line-height to keep the icon or text centered.

/* Example: Making the launcher button smaller */
.circle-button {
    width: 50px;
    height: 50px;
    line-height: 50px; /* Matches height for vertical centering */
    font-size: 20px;
}

Container Constraints

• Overflow: The container is set to overflow: hidden to ensure the iframe corners match the rounded borders of the popup (10px border-radius).
• Z-Index: The popup uses a z-index of 1001 and the button uses 9999. If the chatbot is appearing behind your website's header or other elements, you may need to increase these values in your custom CSS.