UI Customization (CSS)

The Supervised AI Bots plugin allows you to fully customize the appearance of the chatbot interface to match your website's branding. By modifying the plugin's CSS, you can adjust the floating launcher button, the dimensions of the chat window, and its position on the screen.

Target CSS Classes

To customize the chatbot, you should target the following primary classes in your theme's stylesheet or the plugin's custom-popup-style.css file:

Customizing the Launcher Button

The .circle-button is the primary touchpoint for users. You can change its color, size, and position.

/* Change the launcher button color and size */
.circle-button {
    background-color: #e67e22; /* Custom orange color */
    width: 70px;               /* Increase size */
    height: 70px;
    line-height: 70px;         /* Center the icon vertically */
    bottom: 30px;              /* Move further from the bottom */
    right: 30px;               /* Move further from the right */
}

Adjusting the Chat Window Dimensions

By default, the chat window has a fixed height and width. You can modify the .popup-container to better fit your site's layout.

/* Adjust chat window size and border radius */
.popup-container {
    width: 450px;           /* Wider interface */
    height: 750px;          /* Taller interface */
    border-radius: 20px;    /* Softer rounded corners */
    bottom: 110px;          /* Positioned above the launcher button */
}

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

Changing Interface Position (Left Side)

If you prefer the chatbot to appear on the bottom-left of the screen instead of the bottom-right, update both the button and the container:

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

Theming the Chat Window

You can add borders or change the shadow depth to make the chatbot stand out or blend in with your design.

/* Add a custom border and deeper shadow */
.popup-container {
    border: 2px solid #007bff;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
}

Responsive Adjustments

To ensure a good user experience on mobile devices, you can use media queries to resize the chatbot for smaller screens.

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        left: 5%;
        height: 80vh; /* Use viewport height for mobile */
    }
    
    .iframe-container, 
    .popup-body {
        height: 80vh;
    }
}

Note on Iframe Content

Please note that the internal styles of the chatbot (e.g., chat bubble colors, font inside the chat) are controlled via the Supervised AI Dashboard. The CSS styles defined here only affect the wrapper and the launcher button provided by the WordPress plugin.