Custom Styling (CSS)
Custom Styling (CSS)
The Supervised AI Bots plugin is designed to be visually flexible. You can override the default appearance of the chatbot interface—including the launcher button and the chat window—by adding custom CSS to your WordPress theme's stylesheet or via the Appearance > Customize > Additional CSS section in your dashboard.
Core CSS Classes
To modify the interface, target the following CSS classes:
| Class | Description |
| :--- | :--- |
| .circle-button | The floating circular button used to open and close the chatbot. |
| .popup-container | The main wrapper for the chatbot window. |
| .iframe-container | The container holding the chatbot's embedded content. |
| .popup-body | The internal area of the chat window where the bot resides. |
Customizing the Launcher Button
The launcher button is the primary touchpoint for users. You can change its color, size, or position.
/* Change the launcher button color and size */
.circle-button {
background-color: #28a745; /* Change to your brand color */
width: 70px;
height: 70px;
line-height: 70px; /* Should match height to center the icon */
bottom: 30px; /* Distance from the bottom of the screen */
right: 30px; /* Distance from the right of the screen */
}
Adjusting Chat Window Dimensions
By default, the chatbot window is optimized for most screens. If you need a larger or smaller chat interface, adjust the width and height properties.
Note: When changing the height, ensure you update the
.popup-container,.popup-body, and.iframe-containerclasses to maintain consistency.
/* Increase the chat window size */
.popup-container {
width: 450px; /* Default is 400px */
height: 750px; /* Default is 670px */
max-width: 90%; /* Ensures responsiveness on smaller screens */
}
/* Match the body and iframe height to the container */
.popup-body,
.iframe-container {
height: 750px;
}
Changing Position
If the default bottom-right placement interferes with other site elements (like "Back to Top" buttons), you can move the chatbot to the left side.
/* Move the launcher to the left */
.circle-button {
right: auto;
left: 20px;
}
/* Move the chat window to the left */
.popup-container {
right: auto;
left: 20px;
}
Advanced Visual Tweaks
You can further customize the "feel" of the component by modifying shadows and border radiuses.
/* Add a softer shadow and more rounded corners */
.popup-container {
border-radius: 20px;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}
/* Remove the launcher button shadow */
.circle-button {
box-shadow: none;
}
Mobile Responsiveness
To ensure the chatbot looks great on mobile devices, use media queries to adjust dimensions for smaller screens.
@media screen and (max-width: 480px) {
.popup-container {
width: 95%;
right: 2.5%;
bottom: 80px;
height: 80vh; /* Uses 80% of the viewport height */
}
.popup-body,
.iframe-container {
height: 80vh;
}
}