CSS & Styling

The Supervised AI Bot plugin is designed with a clean, floating interface. You can customize the look and feel of the chatbot—including the launcher button and the chat window—by adding custom CSS to your WordPress theme (typically under Appearance > Customize > Additional CSS).

Customizing the Launcher Button

The floating circular button that opens the chat is controlled by the .circle-button class. By default, it is a blue circle positioned at the bottom-right of the screen.

/* Change the launcher button color and size */
.circle-button {
    background-color: #ff5733 !important; /* Custom background color */
    width: 70px !important;              /* Custom width */
    height: 70px !important;             /* Custom height */
    line-height: 70px !important;        /* Centers the icon vertically */
    bottom: 30px !important;             /* Distance from bottom */
    right: 30px !important;              /* Distance from right */
}

Adjusting the Chat Container

The chat window itself is controlled by the .popup-container class. You can modify its dimensions, border-radius, or shadow to match your site's branding.

/* Change the dimensions and border of the chat window */
.popup-container {
    width: 450px !important;          /* Increase width */
    height: 750px !important;         /* Increase height */
    border-radius: 20px !important;   /* Rounder corners */
    box-shadow: 0px 10px 20px rgba(0,0,0,0.2) !important; /* Softer shadow */
}

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

Repositioning the Chatbot

If you prefer the chatbot to appear on the left side of the screen instead of the right, use the following snippet:

/* Move the launcher 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;
}

Overriding the Iframe Display

The chatbot content is loaded via an iframe. While you cannot style the internal content of the Supervised AI bot (as it is served from an external domain), you can control how the iframe sits within the container:

/* Add a border or change the background of the iframe area */
.iframe-container iframe {
    border: 1px solid #eeeeee !important;
    background-color: #f9f9f9 !important;
}

Mobile Adjustments

The chat window has a default width of 400px. To ensure it fits on smaller screens, you may want to add a media query:

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90% !important;
        right: 5% !important;
        bottom: 80px !important;
    }
}

Note: Because the plugin styles are loaded via a stylesheet, you may need to use the !important flag in your custom CSS to ensure your changes take precedence over the default plugin styles.