Customizing Styles (CSS)
Customizing Styles (CSS)
The Supervised AI Bots plugin provides a default design that is clean and functional. However, you may want to customize the appearance to better match your brand identity or website layout. You can override the default styles by adding custom CSS to your theme's stylesheet or the WordPress Customizer (Appearance > Customize > Additional CSS).
Core CSS Classes
The following classes are used to style the chatbot interface. Target these in your CSS to make adjustments:
| Class | Description |
| :--- | :--- |
| .circle-button | The floating action button (FAB) used to open and close the chatbot. |
| .popup-container | The main container for the chatbot window. |
| .iframe-container | The wrapper that holds the Supervised AI iframe. |
| .popup-body | The internal content area of the chatbot window. |
Common Customization Examples
Changing the Launcher Button Color
To change the color of the floating chat bubble to match your brand:
/* Change the launcher button background and icon color */
.circle-button {
background-color: #e63946 !important; /* Your brand color */
color: #ffffff !important; /* Icon color */
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}
/* Optional: Change color on hover */
.circle-button:hover {
background-color: #d62828 !important;
}
Adjusting Window Dimensions
If you want the chat window to be larger or smaller on desktop screens:
/* Adjust the width and height of the chat window */
.popup-container {
width: 450px !important; /* Default is 400px */
height: 750px !important; /* Default is 670px */
}
/* Ensure the iframe container fills the new height */
.iframe-container,
.popup-body {
height: 750px !important;
}
Repositioning the Bot
By default, the bot appears in the bottom-right corner. To move it to the bottom-left:
/* Move the launcher button to the left */
.circle-button {
right: auto !important;
left: 20px !important;
}
/* Move the chat window to the left */
.popup-container {
right: auto !important;
left: 20px !important;
}
Modifying Corner Roundness
To give the chat window and button a more "square" or "extra-rounded" look:
/* Make the chat window more rounded */
.popup-container {
border-radius: 25px !important;
}
/* Make the launcher button square with slight rounding */
.circle-button {
border-radius: 8px !important;
}
Mobile Responsiveness
The plugin uses fixed positioning. If you wish to hide the bot on very small screens, you can use a media query:
@media (max-width: 480px) {
.circle-button,
.popup-container {
display: none !important;
}
}
Important Implementation Note
Because the plugin styles are loaded via an external stylesheet, you should use the !important flag in your custom CSS to ensure your overrides take precedence over the default plugin settings.