Customizing the Popup UI
Customizing the Popup UI
The Supervised AI Bots plugin allows you to customize the visual appearance of both the floating launch button and the chat window container. All styles are managed within the custom-popup-style.css file.
By modifying the CSS classes outlined below, you can align the chatbot interface with your website's branding.
The Floating Launch Button
The floating button is the circular icon users click to open the chat. It is controlled by the .circle-button class.
| Property | Description | Default Value |
| :--- | :--- | :--- |
| background-color | Changes the button's color. | #007bff (Blue) |
| bottom / right | Adjusts the distance from the screen edge. | 20px |
| width / height | Sets the size of the circular button. | 60px |
| border-radius | Determines the roundness (50% for a circle). | 50% |
Example: Changing the button color and position
.circle-button {
background-color: #28a745; /* Changes button to green */
bottom: 30px; /* Moves button slightly higher */
right: 30px; /* Moves button further from the right edge */
}
The Chat Container
The chat container is the window that pops up when the button is clicked. This is controlled by the .popup-container class.
- Dimensions: By default, the window is
400pxwide and670pxhigh. You can adjust these to fit your site's layout. - Shadows and Borders: Use
box-shadowandborder-radiusto modify the depth and corner roundness.
Example: Making the chat window larger and more rounded
.popup-container {
width: 450px; /* Increased width */
height: 750px; /* Increased height */
border-radius: 20px; /* Softer corners */
bottom: 100px; /* Positions it above the button */
}
/* Ensure the internal height matches the container */
.popup-body,
.iframe-container {
height: 750px;
}
Adjusting Visibility
The plugin is designed to provide a clean, "widget-like" experience. Some elements are hidden by default to keep the focus on the Supervised AI interface.
- Headers and Footers: The classes
.popup-headerand.popup-footerare set todisplay: none;. If you wish to add a custom title bar, you must change this todisplay: block;and provide additional styling. - Z-Index: The chat window has a
z-indexof1001, and the button has9999. If your website has sticky menus or other floating elements overlapping the chat, increase these values.
Mobile Responsiveness
To ensure the chatbot looks good on smaller screens, you can add media queries to your CSS.
@media screen and (max-width: 480px) {
.popup-container {
width: 90%; /* Window takes up most of the screen width */
right: 5%; /* Centers the window slightly */
height: 80vh; /* Caps height at 80% of the viewport */
}
}
Applying Changes
To apply these customizations:
- Open the
wpaiplugin folder in your WordPress installation. - Locate
custom-popup-style.css. - Edit the file with your preferred CSS rules.
- Clear your browser cache or WordPress optimization plugin cache to see the changes live.