UI & Style Customization

The Supervised AI Bots plugin is designed to be flexible, allowing you to match the chatbot's interface with your website's branding. All visual elements are controlled via CSS, specifically targeting the floating launcher button and the popup container.

Modifying the Launcher Button

The launcher button is the circular toggle that appears in the corner of the screen. You can customize its color, size, and icon style by targeting the .circle-button class.

Example: Changing the button color and size

/* Change launcher to a green theme with a larger size */
.circle-button {
    background-color: #28a745; /* Brand green */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Should match height to center icon */
    font-size: 30px;   /* Size of the icon/text inside */
}

Adjusting Chat Window Dimensions

The chat window (the popup that opens when the button is clicked) has a default height and width optimized for most interfaces. You can override these dimensions using the .popup-container and .iframe-container classes.

Example: Making the chat window larger

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

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

Repositioning the Chatbot

By default, the chatbot is pinned to the bottom-right corner. You can move it to the bottom-left or adjust the offset from the screen edges.

Example: Moving the chatbot to the left side

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

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

Styling the Container

You can modify the "shell" of the chatbot, including border radius (roundness) and shadow intensity, to better fit your UI theme.

Example: Adding a flat design with sharp corners

.popup-container {
    border-radius: 0px; /* Sharp corners */
    box-shadow: 0px 4px 20px rgba(0,0,0,0.1); /* Softer shadow */
    border: 1px solid #ddd; /* Subtle border */
}

UI Class Reference

Use the following selectors in your WordPress "Additional CSS" section or child theme stylesheet to customize the interface:

How to Apply Custom Styles

To apply these changes without modifying the plugin files directly:

Log in to your WordPress Admin Dashboard.
Navigate to Appearance > Customize.
Open the Additional CSS tab.
Paste your custom CSS rules and click Publish.