Launcher Customization

The Supervised AI Bot launcher is the floating action button that users click to open the chat interface. By default, it appears as a blue circle in the bottom-right corner of the screen. You can customize its appearance by adding custom CSS to your WordPress theme or via the Additional CSS section in the WordPress Customizer (Appearance > Customize > Additional CSS).

Targeting the Launcher

The launcher is controlled by the .circle-button CSS class. Use this selector to override the default styles.

Changing the Button Color

To change the background color or the icon (text) color, modify the background-color and color properties:

/* Change launcher to a green theme */
.circle-button {
    background-color: #28a745 !important; /* New background color */
    color: #ffffff !important;           /* Icon/Text color */
}

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

Adjusting Position

By default, the launcher is pinned 20px from the bottom and right edges. You can move it to the left side or adjust the offset:

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

/* Adjust the vertical offset */
.circle-button {
    bottom: 40px !important;
}

Modifying Size and Shape

You can adjust the dimensions and the border-radius to change the launcher's shape (e.g., making it a square or a larger circle).

/* Make the launcher larger and square */
.circle-button {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important; /* Should match height to center text */
    border-radius: 8px !important; /* Rounded corners instead of a circle */
    font-size: 32px !important;    /* Larger icon size */
}

Customizing the Chat Popup Container

When the launcher is clicked, it opens the .popup-container. You can also style this container to match your branding:

.popup-container {
    border: 2px solid #007bff !important;
    border-radius: 15px !important;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.2) !important;
}

Implementation Notes

Specificity: Because the plugin styles are loaded via a stylesheet, you may need to use the !important flag (as shown above) to ensure your custom styles take precedence over the defaults.
Z-Index: The launcher has a default z-index of 9999. If your theme's header or other elements are appearing on top of the chatbot, you may need to increase this value.