Trigger Button Styling
Trigger Button Styling
The Supervised AI Bot uses a Floating Action Button (FAB) to toggle the visibility of the chatbot interface. By default, this button appears as a blue circle in the bottom-right corner of the screen.
You can customize the appearance, position, and size of this button by adding custom CSS to your WordPress theme or via the Additional CSS section in the WordPress Customizer.
Targeting the Button
To modify the trigger button, target the .circle-button class in your stylesheet.
Common Customizations
1. Changing Position
By default, the button is fixed 20px from the bottom and 20px from the right. To move it to the left side or adjust the offset:
/* Move button to the bottom-left */
.circle-button {
right: auto;
left: 20px;
}
/* Increase the bottom offset */
.circle-button {
bottom: 40px;
}
2. Modifying Colors and Branding
You can update the background color to match your brand and change the icon (text) color:
.circle-button {
background-color: #e63946; /* Change to your brand color */
color: #ffffff; /* Icon/Text color */
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Soften the shadow */
}
3. Adjusting Size
If you want a larger or smaller trigger, adjust the width, height, and line-height properties simultaneously to maintain alignment:
/* Smaller 50px button */
.circle-button {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
Hover Effects
To improve user experience, you can add hover states to the button:
.circle-button:hover {
background-color: #0056b3;
transform: scale(1.05);
transition: all 0.3s ease;
}
Z-Index Management
The trigger button has a default z-index of 9999 to ensure it stays above most website elements. If the button is being hidden by other theme elements (like sticky headers or overlays), you can increase this value:
.circle-button {
z-index: 99999;
}
Complete Customization Template
Copy and paste this template into your WordPress site to apply a fully custom look:
.circle-button {
background-color: #25d366; /* Example: Green color */
width: 65px;
height: 65px;
line-height: 65px;
bottom: 30px;
right: 30px;
border-radius: 12px; /* Square with rounded corners instead of a circle */
font-weight: bold;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}