Popup UI Styling
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
| Class Selector | Role |
| :--- | :--- |
| .popup-container | The main outer box containing the chatbot. |
| .circle-button | The floating action button (FAB) that toggles the chat. |
| .popup-body | The wrapper for the iframe content. |
| .iframe-container | Specifically manages the positioning of the bot iframe. |
| .popup-header | The top section of the popup (hidden by default). |
| .popup-footer | The bottom section of the popup (hidden by default). |