Customizing the UI
Customizing the UI
You can customize the appearance of the Supervised AI Chatbot to better match your website's branding. Since the plugin uses standard CSS classes for its interface, you can override these styles in your theme's stylesheet or through the WordPress Customizer (Appearance > Customize > Additional CSS).
Customizing the Floating Launcher Button
The chatbot is launched via a circular button (Floating Action Button) located at the bottom-right of the screen. You can modify its color, size, and position using the .circle-button class.
/* Example: Change button color and position */
.circle-button {
background-color: #ff5733; /* Change to your brand color */
bottom: 30px; /* Distance from bottom */
right: 30px; /* Distance from right */
width: 70px; /* Width of the button */
height: 70px; /* Height of the button */
line-height: 70px; /* Center the icon vertically */
}
Adjusting Popup Dimensions
To change the size of the chat window, you must update the height and width across three primary containers to ensure the internal iframe scales correctly. By default, the popup is 400px wide and 670px high.
/* Example: Increase the size of the chat popup */
.popup-container {
width: 500px; /* New width */
height: 800px; /* New height */
max-width: 90%; /* Ensures responsiveness on smaller screens */
}
.popup-body,
.iframe-container {
height: 800px; /* Must match the container height */
}
Managing Header and Footer Visibility
By default, the plugin hides the popup header and footer to provide a "clean" iframe-only look. If you wish to display these areas (for example, to add a title bar), you can toggle their visibility.
/* Show the header and footer */
.popup-header {
display: block;
background-color: #f1f1f1;
padding: 10px;
}
.popup-footer {
display: block;
background-color: #f1f1f1;
}
Responsive Adjustments
If you want the chatbot to take up more screen space on mobile devices, use media queries to adjust the container width.
@media screen and (max-width: 480px) {
.popup-container {
width: 95%;
right: 2.5%;
bottom: 80px;
}
}
Summary of CSS Classes
The following classes are available for targeting specific UI components:
| Class | Description |
| :--- | :--- |
| .circle-button | The floating circular button used to open/close the chat. |
| .popup-container | The main wrapper for the chat window. |
| .popup-header | The top section of the popup (hidden by default). |
| .popup-body | The middle section containing the iframe. |
| .iframe-container | The specific wrapper ensuring the iframe scales correctly. |
| .popup-footer | The bottom section of the popup (hidden by default). |