Customizing the UI

You can customize the appearance of the Supervised AI Chatbot to better match your website's branding. Since the plugin uses standard CSS classes for its interface, you can override these styles in your theme's stylesheet or through the WordPress Customizer (Appearance > Customize > Additional CSS).

Customizing the Floating Launcher Button

The chatbot is launched via a circular button (Floating Action Button) located at the bottom-right of the screen. You can modify its color, size, and position using the .circle-button class.

/* Example: Change button color and position */
.circle-button {
    background-color: #ff5733; /* Change to your brand color */
    bottom: 30px;              /* Distance from bottom */
    right: 30px;               /* Distance from right */
    width: 70px;               /* Width of the button */
    height: 70px;              /* Height of the button */
    line-height: 70px;         /* Center the icon vertically */
}

Adjusting Popup Dimensions

To change the size of the chat window, you must update the height and width across three primary containers to ensure the internal iframe scales correctly. By default, the popup is 400px wide and 670px high.

/* Example: Increase the size of the chat popup */
.popup-container {
    width: 500px;      /* New width */
    height: 800px;     /* New height */
    max-width: 90%;    /* Ensures responsiveness on smaller screens */
}

.popup-body, 
.iframe-container {
    height: 800px;     /* Must match the container height */
}

Managing Header and Footer Visibility

By default, the plugin hides the popup header and footer to provide a "clean" iframe-only look. If you wish to display these areas (for example, to add a title bar), you can toggle their visibility.

/* Show the header and footer */
.popup-header {
    display: block;
    background-color: #f1f1f1;
    padding: 10px;
}

.popup-footer {
    display: block;
    background-color: #f1f1f1;
}

Responsive Adjustments

If you want the chatbot to take up more screen space on mobile devices, use media queries to adjust the container width.

@media screen and (max-width: 480px) {
    .popup-container {
        width: 95%;
        right: 2.5%;
        bottom: 80px;
    }
}

Summary of CSS Classes

The following classes are available for targeting specific UI components: