Popup UI & Styling

Popup UI & Styling

The Supervised AI Bot plugin uses a customizable CSS-based interface to display the chatbot. By modifying the custom-popup-style.css file, you can adjust the dimensions, colors, and positioning of both the launcher button and the chat window to match your website's branding.

The Launcher Button

The launcher is the floating circular button that users click to open the chat interface. It is controlled by the .circle-button class.

Default Properties:

• Color: Blue (#007bff)
• Size: 60px x 60px
• Position: Fixed, 20px from the bottom and right.

To change the appearance of the button, target these properties:

.circle-button {
    background-color: #28a745; /* Change to your brand color */
    width: 70px;               /* Increase size */
    height: 70px;
    line-height: 70px;         /* Match height to center icon/text */
    bottom: 30px;              /* Adjust distance from bottom */
    right: 30px;               /* Adjust distance from right */
}

The Popup Container

The .popup-container class manages the window that houses the chatbot iframe. By default, this container is optimized for a vertical chat experience.

Key Layout Values:

• Width: 400px (with a max-width of 800px).
• Height: 670px.
• Border Radius: 10px for rounded corners.
• Shadow: Subtle 10px spread for depth.

To modify the chat window dimensions:

.popup-container {
    width: 450px;       /* Make the window wider */
    height: 750px;      /* Make the window taller */
    border-radius: 0px; /* Square edges */
    bottom: 90px;       /* Ensure it sits above the launcher button */
}

Styling the Iframe Content

The chatbot content is loaded via an iframe inside the .iframe-container. To ensure the bot takes up the full space of the popup, the iframe is set to absolute positioning.

If you change the height of the .popup-container, you must also update the height in the following classes to ensure the iframe scales correctly:

/* Update these if you change the container height */
.popup-body, 
.iframe-container, 
.popup-container {
    height: 750px; 
}

Adjusting Visibility of UI Elements

By default, the plugin hides the standard header and footer to provide a "chromeless" look for the Supervised AI bot.

• Header: Managed by .popup-header (Default: display: none)
• Footer: Managed by .popup-footer (Default: display: none)

If you wish to add a custom title or branding area at the top of the popup, you can enable the header:

.popup-header {
    display: block;
    background-color: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

Positioning: Left vs. Right

To move the entire chatbot interface to the left side of the screen, you need to update both the launcher and the container:

/* Move Launcher to Left */
.circle-button {
    right: auto;
    left: 20px;
}

/* Move Popup to Left */
.popup-container {
    right: auto;
    left: 20px;
}

Z-Index Management

The launcher is set to z-index: 9999 and the popup to z-index: 1001. This ensures the chatbot remains visible over standard navigation bars and page elements. If the chatbot is appearing behind other elements on your site, increase the z-index values in your CSS.