UI & Style Customization
UI & Style Customization
The Supervised AI Bots plugin is designed to be flexible, allowing you to match the chatbot's interface with your website's branding. All visual elements are controlled via CSS, specifically targeting the floating launcher button and the popup container.
Modifying the Launcher Button
The launcher button is the circular toggle that appears in the corner of the screen. You can customize its color, size, and icon style by targeting the .circle-button class.
Example: Changing the button color and size
/* Change launcher to a green theme with a larger size */
.circle-button {
background-color: #28a745; /* Brand green */
width: 70px;
height: 70px;
line-height: 70px; /* Should match height to center icon */
font-size: 30px; /* Size of the icon/text inside */
}
Adjusting Chat Window Dimensions
The chat window (the popup that opens when the button is clicked) has a default height and width optimized for most interfaces. You can override these dimensions using the .popup-container and .iframe-container classes.
Example: Making the chat window larger
/* Increase the height and width of the chat popup */
.popup-container {
height: 800px;
width: 500px;
max-width: 90%; /* Ensures responsiveness on smaller screens */
}
/* Ensure the internal iframe container matches the new height */
.popup-body, .iframe-container {
height: 800px;
}
Repositioning the Chatbot
By default, the chatbot is pinned to the bottom-right corner. You can move it to the bottom-left or adjust the offset from the screen edges.
Example: Moving the chatbot to the left side
/* Move the launcher button */
.circle-button {
right: auto;
left: 20px;
}
/* Move the popup container */
.popup-container {
right: auto;
left: 20px;
}
Styling the Container
You can modify the "shell" of the chatbot, including border radius (roundness) and shadow intensity, to better fit your UI theme.
Example: Adding a flat design with sharp corners
.popup-container {
border-radius: 0px; /* Sharp corners */
box-shadow: 0px 4px 20px rgba(0,0,0,0.1); /* Softer shadow */
border: 1px solid #ddd; /* Subtle border */
}
UI Class Reference
Use the following selectors in your WordPress "Additional CSS" section or child theme stylesheet to customize the interface:
| Selector | Description |
| :--- | :--- |
| .circle-button | The floating circular button used to open/close the chat. |
| .popup-container | The main wrapper for the chatbot popup. |
| .iframe-container | The container holding the Supervised AI iframe. |
| .popup-body | The internal body area of the popup. |
How to Apply Custom Styles
To apply these changes without modifying the plugin files directly:
- Log in to your WordPress Admin Dashboard.
- Navigate to Appearance > Customize.
- Open the Additional CSS tab.
- Paste your custom CSS rules and click Publish.