Popup UI Styling

The Supervised AI Bot plugin provides a customizable popup interface. By modifying the CSS classes provided in the plugin's stylesheet, you can align the chatbot's appearance with your brand's visual identity.

Customizing the Chatbot Container

The main wrapper for the chatbot is controlled by the .popup-container class. By default, it appears in the bottom-right corner of the screen.

To change the dimensions or the rounded corners of the chat window, target the following properties:

/* Example: Making the chat window larger and more rounded */
.popup-container {
    width: 450px;         /* Change default width */
    height: 750px;        /* Change default height */
    border-radius: 20px;  /* Softer corners */
    bottom: 30px;         /* Distance from bottom */
    right: 30px;          /* Distance from right */
}

Launcher Button Styling

The floating circular button used to open and close the chatbot is controlled via the .circle-button class. You can modify the color, size, and shadow to make it stand out.

/* Example: Changing the launcher color and size */
.circle-button {
    background-color: #28a745; /* Change to brand green */
    width: 70px;               /* Increase size */
    height: 70px;
    line-height: 70px;         /* Match height to center icon */
    font-size: 30px;           /* Larger icon text/symbol */
}

Iframe and Content Dimensions

The chatbot content is loaded via an iframe inside a container. To ensure the bot displays correctly without internal scrollbars, the .iframe-container and .popup-body heights should match the .popup-container height.

/* Ensure these match your .popup-container height */
.popup-body, 
.iframe-container {
    height: 670px; 
}

Toggling Header and Footer Visibility

By default, the plugin hides the popup header and footer to provide a "clean" look focused entirely on the AI interface. If your specific implementation requires a header (e.g., for a title or close button), you can enable it:

/* Show the header if needed */
.popup-header {
    display: block;
    background-color: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

Responsive Adjustments

For mobile devices, you may want the chatbot to occupy more screen real estate. You can add a media query to your theme's CSS:

@media (max-width: 600px) {
    .popup-container {
        width: 90%;
        right: 5%;
        bottom: 80px;
        height: 80vh;
    }
}

CSS Class Reference