CSS Styling Guide

The Supervised AI Bot plugin's appearance is controlled by standard CSS, allowing you to customize the chatbot's interface to match your website's branding. All styles are defined within custom-popup-style.css. You can override these styles by adding them to your WordPress theme's "Additional CSS" section or your child theme's stylesheet.

Key CSS Classes

The following classes are the primary targets for customization:

Positioning the Bot

By default, both the floating button and the chat popup are anchored to the bottom-right corner of the screen.

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

Customizing the Floating Button

The .circle-button acts as the trigger for the chat interface. You can modify its color, size, and shadow to better fit your UI.

/* Change button color and size */
.circle-button {
    background-color: #28a745; /* Green branding */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Keep icon centered */
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}

Adjusting Chat Window Dimensions

The default dimensions for the chatbot popup are 400px wide and 670px high. To change the size, you must update both the container and the internal heights.

/* Increase the size of the chat window */
.popup-container {
    width: 500px;
    height: 800px;
}

.popup-body, 
.iframe-container {
    height: 800px;
}

Iframe Integration

The chatbot content is delivered via an iframe. The .iframe-container iframe selector ensures the bot takes up 100% of the allocated space within the popup.

/* Add a border or rounded corners to the iframe itself */
.iframe-container iframe {
    border-radius: 10px;
    border: 1px solid #ddd;
}

Responsive Design Adjustments

On smaller screens, the default 400px width might exceed the viewport. Use media queries to ensure the chatbot remains functional on mobile devices.

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        bottom: 80px; /* Offset to stay above the button */
        height: 70vh; /* Use viewport height for better scaling */
    }
    
    .popup-body, 
    .iframe-container {
        height: 70vh;
    }
}

Visibility Management

The plugin uses display: none; and display: block; toggled via JavaScript. If you wish to implement a custom animation (like a fade-in), you should target the .popup-container while ensuring you do not conflict with the inline styles applied by the togglePopup() function.

Note: The .popup-header and .popup-footer classes are hidden by default (display: none) to provide a clean, "chat-only" aesthetic. You can enable them by setting display: block if your custom implementation requires specific headers or footers.