Customizing Styles
Customizing Styles
To ensure the Supervised AI Chatbot aligns with your website's branding, you can modify the custom-popup-style.css file. This file controls the appearance of both the floating launcher button and the chat window container.
Adjusting the Launcher Button
The launcher button (the circular icon users click to open the chat) is controlled by the .circle-button class. You can change its color, size, and position on the screen.
/* Example: Changing the launcher button color and position */
.circle-button {
background-color: #007bff; /* Change this to your brand color */
bottom: 30px; /* Distance from the bottom of the screen */
right: 30px; /* Distance from the right of the screen */
width: 60px; /* Width of the button */
height: 60px; /* Height of the button */
font-size: 24px; /* Size of the icon/text inside */
}
Modifying the Chat Window
The chat window container is controlled by the .popup-container class. You can adjust its dimensions, border radius, and shadow to match your site's UI.
/* Example: Customizing the chat window dimensions */
.popup-container {
width: 400px; /* Width of the chat window */
height: 670px; /* Total height of the chat window */
bottom: 90px; /* Positioned above the launcher button */
right: 20px;
border-radius: 15px; /* Roundness of the corners */
box-shadow: 0px 4px 15px rgba(0,0,0,0.2); /* Shadow depth */
}
Adjusting Chat Content Height
If you change the height of the .popup-container, you must also update the .popup-body and .iframe-container classes to ensure the chatbot iframe fills the space correctly.
/* Ensure the internal containers match your custom height */
.popup-body,
.iframe-container {
height: 670px; /* Match the height set in .popup-container */
}
CSS Selector Reference
Use the following selectors for targeted styling:
| Selector | Description |
| :--- | :--- |
| .circle-button | The floating action button used to open/close the chat. |
| .popup-container | The main wrapper for the chatbot window. |
| .iframe-container | The container holding the Supervised AI iframe. |
| .popup-header | The top section of the popup (hidden by default). |
| .popup-footer | The bottom section of the popup (hidden by default). |
Applying Changes
- Navigate to the plugin folder:
/wp-content/plugins/supervised-ai-bots/css/. - Open
custom-popup-style.cssin a text editor. - Save your changes and refresh your website. (You may need to clear your browser cache to see the updates).