Launcher Customization
Launcher Customization
The Supervised AI Bot launcher is the floating action button that users click to open the chat interface. By default, it appears as a blue circle in the bottom-right corner of the screen. You can customize its appearance by adding custom CSS to your WordPress theme or via the Additional CSS section in the WordPress Customizer (Appearance > Customize > Additional CSS).
Targeting the Launcher
The launcher is controlled by the .circle-button CSS class. Use this selector to override the default styles.
Changing the Button Color
To change the background color or the icon (text) color, modify the background-color and color properties:
/* Change launcher to a green theme */
.circle-button {
background-color: #28a745 !important; /* New background color */
color: #ffffff !important; /* Icon/Text color */
}
/* Add a hover effect */
.circle-button:hover {
background-color: #218838 !important;
transform: scale(1.1);
transition: all 0.3s ease;
}
Adjusting Position
By default, the launcher is pinned 20px from the bottom and right edges. You can move it to the left side or adjust the offset:
/* Move the launcher to the bottom-left */
.circle-button {
right: auto !important;
left: 20px !important;
}
/* Adjust the vertical offset */
.circle-button {
bottom: 40px !important;
}
Modifying Size and Shape
You can adjust the dimensions and the border-radius to change the launcher's shape (e.g., making it a square or a larger circle).
/* Make the launcher larger and square */
.circle-button {
width: 80px !important;
height: 80px !important;
line-height: 80px !important; /* Should match height to center text */
border-radius: 8px !important; /* Rounded corners instead of a circle */
font-size: 32px !important; /* Larger icon size */
}
Customizing the Chat Popup Container
When the launcher is clicked, it opens the .popup-container. You can also style this container to match your branding:
.popup-container {
border: 2px solid #007bff !important;
border-radius: 15px !important;
box-shadow: 0px 10px 25px rgba(0,0,0,0.2) !important;
}
Implementation Notes
- Specificity: Because the plugin styles are loaded via a stylesheet, you may need to use the
!importantflag (as shown above) to ensure your custom styles take precedence over the defaults. - Z-Index: The launcher has a default
z-indexof9999. If your theme's header or other elements are appearing on top of the chatbot, you may need to increase this value.