Iframe & Container Styling

Iframe & Container Styling

The Supervised AI Bot uses a responsive, fixed-position container to house the chatbot interface. This ensures the bot remains accessible to users regardless of their scroll position.

Container Specifications

The chatbot resides within a .popup-container element. By default, it is positioned at the bottom-right corner of the viewport.

| Property | Default Value | Description | | :--- | :--- | :--- | | Position | fixed | Stays in place relative to the browser window. | | Bottom Offset | 20px | Distance from the bottom of the screen. | | Right Offset | 20px | Distance from the right of the screen. | | Height | 670px | Fixed height of the chat window. | | Width | 400px | Default width of the chat window. | | Max Width | 800px | Maximum allowable width for responsiveness. | | Z-Index | 1001 | Ensures the container sits above standard page content. | | Border Radius | 10px | Softens the corners of the container. |

Iframe Behavior

The chatbot content is loaded via an iframe within an .iframe-container wrapper. The iframe is configured to fill the entirety of the popup body:

• Border: none (Removes default browser iframe borders).
• Dimensions: 100% width and 100% height of the parent container.
• Scrolling: Managed by the internal chatbot URL; the container itself is set to overflow: hidden to prevent redundant scrollbars.

Toggle Button (Launcher) Styling

The launcher button (.circle-button) is the floating circular icon used to open and close the chatbot.

• Dimensions: 60px x 60px.
• Background Color: #007bff (Primary Blue).
• Icon Alignment: Centered text/icon with a line-height of 60px.
• Z-Index: 9999 (Positioned higher than the popup container to ensure visibility).

Customizing the Appearance

To override the default styling, you can add custom CSS to your WordPress theme's style.css file or via the Appearance > Customize > Additional CSS menu.

Example: Adjusting the Bot Position and Color

If you wish to move the bot to the left side of the screen and change the launcher color, use the following CSS:

/* Move the launcher and chat window to the left */
.circle-button, 
.popup-container {
    right: auto;
    left: 20px;
}

/* Change launcher background to Green */
.circle-button {
    background-color: #28a745;
}

/* Increase the height of the chat window */
.popup-container,
.popup-body,
.iframe-container {
    height: 750px;
}

Mobile Responsiveness

The container uses max-width: 800px and a fixed width: 400px. On screens narrower than 400px, you may need to apply a media query to ensure the container fits the viewport:

@media (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        bottom: 80px; /* Space for the launcher button */
    }
}