CSS Layout & Customization
CSS Layout & Customization
The Supervised AI Bots plugin provides a default floating chat interface. To match your website's branding, you can override the following CSS classes within your theme's stylesheet or via the WordPress "Additional CSS" customizer.
Key Styling Classes
The plugin's layout is primarily controlled by three main components: the launcher button, the chat container, and the iframe wrapper.
1. The Launcher Button (.circle-button)
This is the circular toggle button that appears in the bottom-right corner of the screen.
| Property | Default Value | Description |
| :--- | :--- | :--- |
| background-color | #007bff | The primary color of the launcher circle. |
| width / height | 60px | The dimensions of the button. |
| bottom / right | 20px | The offset distance from the edge of the screen. |
| z-index | 9999 | Ensures the button stays above other page elements. |
2. The Chat Container (.popup-container)
This is the main window that houses the chatbot iframe.
| Property | Default Value | Description |
| :--- | :--- | :--- |
| width | 400px | The width of the chat window. |
| height | 670px | The fixed height of the chat window. |
| border-radius | 10px | The roundness of the window corners. |
| box-shadow | 0px 0px 10px ... | The outer glow/shadow of the chat window. |
3. The Content Wrapper (.iframe-container)
This ensures the Supervised AI interface fills the available space within the popup. It is set to a fixed height of 670px by default to prevent layout shifts.
Customization Examples
To apply custom branding, add these snippets to your WordPress site.
Changing the Launcher Color and Position
If you want to move the button to the left side and change it to a brand-specific green:
/* Move launcher to the left and change color */
.circle-button {
background-color: #28a745 !important;
right: auto !important;
left: 20px !important;
}
/* Ensure the chat window also opens on the left */
.popup-container {
right: auto !important;
left: 20px !important;
}
Adjusting Chat Window Size
If you need a larger interface for complex bots, you can expand the container dimensions:
/* Increase chat window size */
.popup-container {
width: 500px !important;
height: 800px !important;
}
.iframe-container,
.popup-body {
height: 800px !important;
}
Hiding the Launcher on Mobile
If you prefer to hide the floating bot on smaller screens:
@media (max-width: 600px) {
.circle-button,
.popup-container {
display: none !important;
}
}
Important Notes
- Specificity: Because the plugin styles are loaded via a dedicated stylesheet, you may need to use the
!importantflag to override certain properties effectively. - Internal Elements: The
.popup-headerand.popup-footerare set todisplay: noneby default to provide a seamless "Supervised AI" full-frame experience. You can enable them via CSS if you wish to add custom headers or padding around the bot.