Customizing the Chat UI

The Supervised AI Bots plugin is designed to be flexible. You can modify the appearance of the chat launcher and the chat window to align with your website's branding by overriding the default CSS.

Key CSS Classes

To customize the UI, you should target the following primary CSS classes:

Styling the Launcher Button

The default launcher is a blue circle positioned at the bottom-right of the screen. You can change its color, size, or position by adding custom CSS to your theme.

/* Change the launcher background color and size */
.circle-button {
    background-color: #e67e22; /* Custom Brand Color */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Should match height to center icon */
    bottom: 30px;
    right: 30px;
}

Resizing the Chat Window

If you want the chatbot to occupy more or less screen space, you can adjust the dimensions of the .popup-container.

/* Adjust chat window dimensions */
.popup-container {
    width: 450px;    /* Default is 400px */
    height: 750px;   /* Default is 670px */
    border-radius: 15px;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
}

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

Changing Position

By default, the chatbot appears in the bottom-right corner. If you prefer the bottom-left, you can swap the right and left properties.

/* Move the launcher and chat window to the left side */
.circle-button, 
.popup-container {
    right: auto;
    left: 20px;
}

Best Practices for Customization

Use the WordPress Customizer: Instead of editing the plugin files directly (which will be overwritten during updates), navigate to Appearance > Customize > Additional CSS in your WordPress dashboard and paste your overrides there.
Specific Selectors: If your theme styles interfere with the chatbot, use more specific selectors or add !important to your rules (e.g., background-color: #ff0000 !important;).
Responsive Design: Ensure that your custom width does not exceed the screen width on mobile devices.

/* Ensure responsiveness on small screens */
@media (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        bottom: 90px;
    }
}

Internal Components

While the UI is highly customizable, the following elements are handled internally to ensure functionality:

togglePopup(): A JavaScript function that handles the visibility state of the chat window.
closePopup(): A JavaScript function specifically for hiding the chat interface.

These functions are triggered by the click events on the launcher button and do not require manual modification for standard branding updates.