Custom Styling (CSS)

The Supervised AI Bots plugin is designed to be visually flexible. You can override the default appearance of the chatbot interface—including the launcher button and the chat window—by adding custom CSS to your WordPress theme's stylesheet or via the Appearance > Customize > Additional CSS section in your dashboard.

Core CSS Classes

To modify the interface, target the following CSS classes:

Customizing the Launcher Button

The launcher button is the primary touchpoint for users. You can change its color, size, or position.

/* Change the launcher button color and size */
.circle-button {
    background-color: #28a745; /* Change to your brand color */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Should match height to center the icon */
    bottom: 30px;      /* Distance from the bottom of the screen */
    right: 30px;       /* Distance from the right of the screen */
}

Adjusting Chat Window Dimensions

By default, the chatbot window is optimized for most screens. If you need a larger or smaller chat interface, adjust the width and height properties.

Note: When changing the height, ensure you update the .popup-container, .popup-body, and .iframe-container classes to maintain consistency.

/* Increase the chat window size */
.popup-container {
    width: 450px;      /* Default is 400px */
    height: 750px;     /* Default is 670px */
    max-width: 90%;    /* Ensures responsiveness on smaller screens */
}

/* Match the body and iframe height to the container */
.popup-body, 
.iframe-container {
    height: 750px;
}

Changing Position

If the default bottom-right placement interferes with other site elements (like "Back to Top" buttons), you can move the chatbot to the left side.

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

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

Advanced Visual Tweaks

You can further customize the "feel" of the component by modifying shadows and border radiuses.

/* Add a softer shadow and more rounded corners */
.popup-container {
    border-radius: 20px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

/* Remove the launcher button shadow */
.circle-button {
    box-shadow: none;
}

Mobile Responsiveness

To ensure the chatbot looks great on mobile devices, use media queries to adjust dimensions for smaller screens.

@media screen and (max-width: 480px) {
    .popup-container {
        width: 95%;
        right: 2.5%;
        bottom: 80px;
        height: 80vh; /* Uses 80% of the viewport height */
    }
    
    .popup-body, 
    .iframe-container {
        height: 80vh;
    }
}