Floating Action Button (FAB)

Floating Action Button (FAB)

The Floating Action Button (FAB) serves as the primary interface trigger for your Supervised AI Chatbot. By default, it appears as a circular blue button in the bottom-right corner of your website.

Overview

The FAB is controlled via the .circle-button CSS class and the togglePopup() JavaScript function. When clicked, it toggles the visibility of the chatbot container.

Visual Customization

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

Style Properties

To modify the button, target the .circle-button selector. The following properties are set by default:

| Property | Default Value | Description | | :--- | :--- | :--- | | background-color | #007bff | The fill color of the button. | | width / height | 60px | The dimensions of the button. | | bottom | 20px | Distance from the bottom of the viewport. | | right | 20px | Distance from the right of the viewport. | | font-size | 24px | The size of the icon/text inside the button. |

Example: Branding Customization

Use this snippet to change the button to a brand color (e.g., Green) and increase its size:

/* Change FAB color and size */
.circle-button {
    background-color: #28a745 !important;
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important; /* Matches height to center icon */
    font-size: 30px !important;
}

/* Add a hover effect */
.circle-button:hover {
    background-color: #218838 !important;
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

Positioning

The FAB is fixed to the viewport. If the default bottom-right position interferes with other elements (like "Back to Top" buttons), you can move it to the left side:

.circle-button {
    right: auto !important;
    left: 20px !important;
}

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

Manual Triggering

If you wish to trigger the chatbot from a custom link, button, or menu item instead of the default FAB, you can call the internal JavaScript functions:

• togglePopup(): Switches the chatbot between visible and hidden states.
• closePopup(): Specifically hides the chatbot interface.

Example Usage in HTML:

<button onclick="togglePopup()">Chat with our AI</button>

Hiding the FAB

If you prefer to use a custom trigger and want to hide the default circular button entirely, add the following CSS:

.circle-button {
    display: none !important;
}