The Floating Action Button

The Floating Action Button (FAB) serves as the primary interface for visitors to interact with your Supervised AI chatbots. By default, the plugin renders a circular blue button in the bottom-right corner of the screen which, when clicked, toggles the chat interface.

Default Behavior and Appearance

The FAB is designed to remain fixed as users scroll through your site, ensuring help is always accessible. The default styles are:

Position: Fixed at 20px from the bottom and 20px from the right.
Size: 60px by 60px.
Color: Standard Blue (#007bff).
Layering: High z-index (9999) to ensure it appears above other site elements.

Customizing Position and Style

You can customize the appearance and placement of the floating button by adding custom CSS to your WordPress theme or via the "Additional CSS" section in the WordPress Customizer.

Use the .circle-button class to override the default styles.

Moving the Button to the Left

If your site has existing elements in the bottom-right (like a "Back to Top" button), you can move the chatbot toggle to the left side:

/* Move the Floating Action Button to the left */
.circle-button {
    right: auto !important;
    left: 20px;
}

/* Ensure the popup window also opens on the left */
.popup-container {
    right: auto !important;
    left: 20px;
}

Changing the Brand Color

To match the button to your website's branding, modify the background-color:

/* Change button to a brand-specific Green */
.circle-button {
    background-color: #28a745 !important;
}

Adjusting Button Size

If you want a more subtle or more prominent button, adjust the height, width, and line-height:

/* Shrink the button size */
.circle-button {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
}

Advanced Layout Customization

The button and the chat window are controlled by two main CSS classes. If you are a developer looking to integrate the FAB more deeply into your layout, use the following selectors:

Visibility Control

By default, the FAB is displayed on every page where the plugin script is active. If you need to hide the button on specific pages using CSS, you can target the page ID:

/* Hide the chatbot on a specific page */
.page-id-123 .circle-button {
    display: none;
}