Styling and Theming
Styling and Theming
The Supervised AI Bots plugin is designed to be lightweight, allowing you to easily match the chatbot's interface with your website’s branding. All visual elements are controlled via CSS classes that can be overridden in your theme's stylesheet or via the WordPress Customizer.
Main Layout Classes
The following CSS classes are the primary targets for styling:
| Class | Description |
| :--- | :--- |
| .circle-button | The floating round button used to open and close the chatbot. |
| .popup-container | The main container that houses the chatbot iframe. |
| .iframe-container | The wrapper specifically for the iframe element. |
Customizing the Launcher Button
The launcher button (the floating circle in the corner) can be styled to match your brand colors and positioning. By default, it is a blue circle located at the bottom-right of the screen.
/* Change the launcher button color and size */
.circle-button {
background-color: #e67e22; /* Your brand color */
width: 70px;
height: 70px;
line-height: 70px; /* Should match height to center icon */
bottom: 30px;
right: 30px;
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}
/* Change the button hover state */
.circle-button:hover {
background-color: #d35400;
transform: scale(1.05);
transition: all 0.2s ease-in-out;
}
Adjusting the Chat Window Dimensions
The chat window container has a default width of 400px and a height of 670px. You can adjust these values to better fit your site's layout.
/* Adjust the chatbot window size and border radius */
.popup-container {
width: 450px; /* Increase width */
height: 600px; /* Decrease height */
bottom: 100px; /* Position it higher above the button */
border-radius: 20px; /* Softer corners */
border: 1px solid #ddd;
}
/* Ensure the iframe container matches the new height */
.popup-body,
.iframe-container {
height: 600px;
}
Repositioning to the Left Side
If your website has other elements (like "Back to Top" buttons) on the right side, you can move the chatbot to the left side of the screen.
/* Move button to the left */
.circle-button {
right: auto;
left: 20px;
}
/* Move popup window to the left */
.popup-container {
right: auto;
left: 20px;
}
Mobile Responsiveness
To ensure a good user experience on smaller screens, you can add media queries to make the chatbot take up more screen real estate on mobile devices.
@media screen and (max-width: 480px) {
.popup-container {
width: 90%;
right: 5%;
left: 5%;
height: 80vh;
bottom: 90px;
}
.popup-body,
.iframe-container {
height: 80vh;
}
}
How to Apply Custom Styles
You can apply these styles using two methods:
- WordPress Customizer (Recommended): Navigate to Appearance > Customize > Additional CSS and paste your custom code there.
- Child Theme: Add the styles to your child theme's
style.cssfile. - Plugin File (Advanced): Modify
css/custom-popup-style.cssdirectly within the plugin folder. Note: Changes made here may be overwritten during plugin updates.
Note: The styles defined here affect the container and the launcher. The content inside the chatbot (colors, fonts, and messages) is managed through your Supervised AI dashboard.