Customizing Styles (CSS)

The Supervised AI Bots plugin provides a default design that is clean and functional. However, you may want to customize the appearance to better match your brand identity or website layout. You can override the default styles by adding custom CSS to your theme's stylesheet or the WordPress Customizer (Appearance > Customize > Additional CSS).

Core CSS Classes

The following classes are used to style the chatbot interface. Target these in your CSS to make adjustments:

Common Customization Examples

Changing the Launcher Button Color

To change the color of the floating chat bubble to match your brand:

/* Change the launcher button background and icon color */
.circle-button {
    background-color: #e63946 !important; /* Your brand color */
    color: #ffffff !important;           /* Icon color */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

/* Optional: Change color on hover */
.circle-button:hover {
    background-color: #d62828 !important;
}

Adjusting Window Dimensions

If you want the chat window to be larger or smaller on desktop screens:

/* Adjust the width and height of the chat window */
.popup-container {
    width: 450px !important;   /* Default is 400px */
    height: 750px !important;  /* Default is 670px */
}

/* Ensure the iframe container fills the new height */
.iframe-container, 
.popup-body {
    height: 750px !important;
}

Repositioning the Bot

By default, the bot appears in the bottom-right corner. To move it to the bottom-left:

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

/* Move the chat window to the left */
.popup-container {
    right: auto !important;
    left: 20px !important;
}

Modifying Corner Roundness

To give the chat window and button a more "square" or "extra-rounded" look:

/* Make the chat window more rounded */
.popup-container {
    border-radius: 25px !important;
}

/* Make the launcher button square with slight rounding */
.circle-button {
    border-radius: 8px !important;
}

Mobile Responsiveness

The plugin uses fixed positioning. If you wish to hide the bot on very small screens, you can use a media query:

@media (max-width: 480px) {
    .circle-button, 
    .popup-container {
        display: none !important;
    }
}

Important Implementation Note

Because the plugin styles are loaded via an external stylesheet, you should use the !important flag in your custom CSS to ensure your overrides take precedence over the default plugin settings.