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);
}