Customizing Appearance

The Supervised AI Bots plugin is designed to be visually flexible, allowing you to match the chatbot interface with your website's branding. Since the plugin uses standard CSS classes, you can override the default styles by adding custom CSS to your theme (typically via Appearance > Customize > Additional CSS or your child theme's stylesheet).

Styling the Floating Launcher Button

The launcher is the circular button visitors click to open the chat. It is controlled by the .circle-button class. You can modify its background color, size, and icon alignment.

/* Example: Change launcher to a custom brand color and size */
.circle-button {
    background-color: #2ecc71; /* Change to your brand green */
    width: 70px;
    height: 70px;
    line-height: 70px;         /* Match height to center the icon vertically */
    font-size: 32px;           /* Adjust the size of the '+' or icon */
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}

Adjusting the Chat Window (Popup)

The container that holds the chatbot iframe is managed by the .popup-container class. You can adjust its width, height, and border styling to fit your layout requirements.

/* Example: Make the chat window wider with softer corners */
.popup-container {
    width: 450px;
    height: 700px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
}

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

Mobile Responsiveness

To provide a better user experience on smaller screens, use media queries to adjust the chatbot's dimensions. By default, the plugin uses fixed pixel widths which may exceed mobile screen sizes.

/* Example: Mobile optimization for screens smaller than 480px */
@media screen and (max-width: 480px) {
    .popup-container {
        width: 90vw;       /* Use 90% of the viewport width */
        right: 5vw;        /* Center it relative to the width */
        height: 70vh;      /* Use 70% of the viewport height */
        bottom: 90px;      /* Position it above the launcher button */
    }
    
    .iframe-container {
        height: 100%;      /* Force iframe to fill the responsive container */
    }
}

Repositioning the Chatbot

By default, the chatbot and launcher are anchored to the bottom-right of the screen. If you prefer the bottom-left, update the positioning properties for both elements:

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

Visibility of UI Components

The plugin's default stylesheet hides specific elements like the .popup-header and .popup-footer to provide a seamless "iframe-only" look. If your specific implementation requires showing a header area, you can override the display property:

/* Show the header if you want to add a title or custom close area above the bot */
.popup-header {
    display: block;
    background-color: #f8f9fa;
    padding: 10px;
    text-align: center;
}

CSS Class Reference