Launcher Button Styling

Launcher Button Styling

The Supervised AI Bot uses a floating circular button (the "launcher") that allows visitors to toggle the chat interface. By default, this button appears in the bottom-right corner of your website.

To match your website's branding, you can customize the launcher's appearance by adding custom CSS to your WordPress theme (via Appearance > Customize > Additional CSS).

Default Styles

The launcher button is controlled by the .circle-button class. Below are the default properties:

| Property | Default Value | Description | | :--- | :--- | :--- | | background-color | #007bff | The primary blue color of the button. | | color | #ffffff | The color of the icon or text inside the button. | | bottom | 20px | Distance from the bottom of the screen. | | right | 20px | Distance from the right of the screen. | | width / height | 60px | The diameter of the circular button. |

Common Customizations

Changing the Color

To change the button's background color to match your brand, override the background-color property:

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

/* Change icon color to black */
.circle-button {
    color: #000000 !important;
}

Adjusting Position

If the launcher overlaps with other elements (like "Back to Top" buttons), you can move it to the left side of the screen or increase the offset:

/* Move the launcher to the bottom-left corner */
.circle-button {
    right: auto !important;
    left: 20px !important;
}

/* Move the launcher higher up the page */
.circle-button {
    bottom: 80px !important;
}

Resizing the Launcher

To make the button smaller or larger, adjust the width, height, and line-height simultaneously to keep the content centered:

/* Make the launcher smaller (40px) */
.circle-button {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 18px !important;
}

Hover Effects

You can add interactive states, such as changing the color when a user hovers over the button:

.circle-button:hover {
    background-color: #0056b3 !important;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

Advanced: Coordinating the Popup Position

If you move the launcher button (e.g., to the left side of the screen), you must also move the chat popup container to ensure they remain aligned:

/* Align the chat popup to the left to match a left-aligned launcher */
.popup-container {
    right: auto !important;
    left: 20px !important;
}