Visual Customization (CSS)

The Supervised AI Bots plugin allows for extensive visual customization through its CSS file. By modifying the custom-popup-style.css file, you can change the appearance of the floating launcher button and the chat popup window to match your website's branding.

The Launcher Button

The floating button that opens the chatbot is controlled by the .circle-button class. You can modify its color, size, and position on the screen.

Key Properties:

background-color: Changes the color of the circular button.
bottom / right: Adjusts the distance from the edges of the browser window.
width / height: Changes the size of the button (ensure these remain equal for a perfect circle).
font-size: Adjusts the size of the icon/text inside the button.

Example: Changing the button color and position

.circle-button {
    background-color: #28a745; /* Green color */
    right: 30px;               /* Move further from the right edge */
    bottom: 30px;              /* Move further from the bottom edge */
}

The Chat Popup Window

The container that houses the Supervised AI chatbot is controlled by the .popup-container class. You can adjust its dimensions, border rounding, and shadow effects.

Key Properties:

width: Sets the default width of the chat window.
height: Sets the height of the chat window.
border-radius: Controls the roundness of the corners.
box-shadow: Adjusts the depth effect of the window.

Example: Making the popup larger and more rounded

.popup-container {
    width: 450px;          /* Wider window */
    height: 750px;         /* Taller window */
    border-radius: 20px;   /* Extra rounded corners */
}

/* Ensure the internal iframe matches the new height */
.iframe-container, .popup-body {
    height: 750px;
}

Positioning the Chatbot on the Left

By default, the chatbot appears in the bottom-right corner. To move both the button and the popup to the bottom-left, update the positioning properties:

.circle-button, .popup-container {
    right: auto;
    left: 20px;
}

Mobile Responsiveness

The chat window uses a max-width property to ensure it does not overflow on smaller screens. If you wish to make the chatbot full-screen on mobile devices, you can add a media query to your CSS:

@media (max-width: 480px) {
    .popup-container {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }
}

Summary of Selectors