Visual Theming (CSS)

The Supervised AI Bots plugin is designed to be flexible, allowing you to customize the chatbot's appearance to match your website’s branding. All visual elements are controlled via CSS classes that can be overridden in your theme's stylesheet or via the WordPress Customizer.

Key CSS Classes

The following classes are used to style the chatbot interface:

Customizing the Launcher Button

The launcher button (the floating circle) defaults to a blue background. You can change its color, size, and position to better suit your design.

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

/* Change position to the left side of the screen */
.circle-button {
    right: auto;
    left: 20px;
}

Adjusting the Chat Window Dimensions

By default, the chat window has a fixed width of 400px and a height of 670px. You can modify these dimensions to provide more space for the conversation.

/* Adjust chat window size */
.popup-container {
    width: 450px;
    height: 750px;
    border-radius: 15px; /* Softer rounded corners */
}

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

Positioning the Chatbot

If you prefer the chatbot to appear on the left side of the screen or need to adjust the offset from the page edges (to avoid overlapping other elements like "Back to Top" buttons), use the following:

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

/* Add more padding from the bottom of the screen */
.popup-container, 
.circle-button {
    bottom: 40px;
}

Styling the Shadow and Borders

You can modify the depth of the interface by changing the box-shadow or adding a border to the chat window.

.popup-container {
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid #dddddd;
}

Mobile Responsiveness

The chat window uses a fixed width by default. To ensure it looks good on smaller mobile devices, you can add a media query to make the window responsive:

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

Implementation Tip

To apply these changes without modifying the plugin files directly, go to your WordPress Admin Dashboard and navigate to Appearance > Customize > Additional CSS. Paste your custom styles there to ensure they are preserved during plugin updates.