Popup Layout & CSS

Popup Layout and Styling

The Supervised AI Bot uses a modern, floating popup interface designed to sit unobtrusively in the corner of your WordPress site. The layout is controlled via custom-popup-style.css and is divided into the trigger button and the chat container.

The Popup Container (.popup-container)

The main chat window is a fixed-position element that appears in the bottom-right corner of the browser. By default, it is hidden (display: none) until the user clicks the trigger button.

• Positioning: Fixed at 20px from the bottom and right edges of the viewport.
• Dimensions: The container has a default width of 400px (with a max-width of 800px for responsiveness) and a height of 670px.
• Layering: It uses a z-index: 1001 to ensure it appears above standard page elements.
• Visuals: Includes a white background (#fff), a 10px border radius for rounded corners, and a subtle drop shadow for depth.

.popup-container {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 670px;
    width: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    z-index: 1001;
}

The Floating Trigger Button (.circle-button)

The bot is activated via a circular Floating Action Button (FAB). This button remains visible to the user at all times unless the popup is open.

• Design: A 60px x 60px circle with a blue background (#007bff).
• Typography: The button uses a white font color with a 24px size, centered both vertically and horizontally.
• Priority: It carries a z-index: 9999 to ensure the "Open" trigger is never obscured by other site content.

.circle-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #007bff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
}

Content Area and iFrame

To provide a seamless experience, the plugin hides the standard header and footer within the popup, dedicating the entire container space to the chatbot interface.

• Popup Body: The .popup-body is set to 670px to match the container, ensuring no internal scrolling outside of the bot itself.
• iFrame Container: The bot URL is loaded into an iFrame that is styled to fill 100% of the width and height of its parent container.

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

Adjusting Dimensions

If you wish to modify the size of the chatbot on your site, you must update the height in three specific locations within the CSS to maintain layout consistency:

1. .popup-container: The outer shell height.
2. .popup-body: The content wrapper height.
3. .iframe-container: The height allocated for the chatbot iFrame.

By default, these are all synchronized at 670px to ensure the Supervised AI interface is displayed without clipping.