CSS & Theming
CSS & Theming
The Supervised AI Chatbot is designed to be unobtrusive and blend with your website's existing design. While the plugin provides a default look and feel, you can easily override the styles to match your brand's color palette, typography, and layout requirements.
CSS Selectors
To customize the chatbot, target the following primary CSS classes in your theme’s stylesheet or via the Appearance > Customize > Additional CSS section in WordPress.
| Selector | Description |
| :--- | :--- |
| .circle-button | The floating action button used to open and close the chatbot. |
| .popup-container | The main wrapper for the chatbot window. |
| .iframe-container | The container holding the chatbot iframe. |
| .popup-body | The internal area of the popup where the chatbot resides. |
Common Customizations
1. Changing the Trigger Button Color
By default, the floating action button is blue (#007bff). You can change this to match your brand's primary color:
/* Change the background and text color of the chat button */
.circle-button {
background-color: #e63946 !important; /* Your brand color */
color: #ffffff !important; /* Icon/Text color */
}
2. Adjusting the Position
If the chatbot overlaps with other elements (like a "Back to Top" button), you can move it to the left side of the screen or adjust the offset:
/* Move the chatbot and button to the bottom-left */
.circle-button,
.popup-container {
right: auto !important;
left: 20px !important;
}
3. Resizing the Chat Window
You can modify the width and height of the popup window to better suit your site's layout. Note that the internal containers should be adjusted simultaneously to maintain alignment.
/* Increase the size of the chat window */
.popup-container {
width: 450px !important;
height: 750px !important;
}
.popup-body,
.iframe-container {
height: 750px !important;
}
4. Customizing the Shadow and Border Radius
To give the chatbot a flatter look or more pronounced shadow, use the following:
/* Soften the shadow and remove rounded corners */
.popup-container {
border-radius: 0px !important;
box-shadow: 0px 10px 30px rgba(0,0,0,0.1) !important;
}
.circle-button {
border-radius: 8px !important; /* Square-ish button */
}
Best Practices & Tips
- Use of
!important: Depending on when your theme's CSS loads, you may need to use the!importantflag to ensure your custom styles override the plugin's defaultcustom-popup-style.css. - Mobile Responsiveness: The chatbot is fixed-width by default (400px). For better mobile support, you may want to add a media query:
@media (max-width: 480px) { .popup-container { width: 90% !important; right: 5% !important; bottom: 80px !important; } } - Z-Index: The chatbot uses a high z-index (
9999for the button and1001for the container) to stay above other content. If your theme's header or overlays are appearing on top of the chat, increase these values accordingly.