Styling & CSS

Styling & Customization

The Supervised AI Bot plugin is designed to be lightweight and flexible. All visual aspects of the chatbot interface—from the floating trigger button to the chat window dimensions—can be customized by modifying the custom-popup-style.css file located in the plugin directory.

Core CSS Classes

The following classes are the primary selectors used to style the chatbot interface:

| Class Name | Description | | :--- | :--- | | .circle-button | The floating circular button used to open and close the chat. | | .popup-container | The main wrapper for the chatbot window. | | .popup-body | The container holding the chatbot content (iframe). | | .iframe-container | Ensures the embedded chatbot scales correctly within the popup. |

Customizing the Floating Button

The floating button is the primary entry point for your users. You can change its color, size, and position to match your site's theme.

/* Example: Changing the button color and position */
.circle-button {
    background-color: #25D366; /* WhatsApp Green */
    bottom: 30px;              /* Distance from bottom */
    right: 30px;               /* Distance from right */
    width: 70px;               /* Increase size */
    height: 70px;
    line-height: 70px;         /* Match height to center icon/text */
}

Adjusting Chat Window Dimensions

By default, the chatbot popup is optimized for a desktop view but can be adjusted if your chatbot requires more or less screen real estate.

/* Example: Making the chat window wider */
.popup-container {
    width: 450px;              /* Increase width */
    height: 700px;             /* Increase height */
    border-radius: 15px;       /* Round the corners more */
    box-shadow: 0px 10px 25px rgba(0,0,0,0.2); /* Softer shadow */
}

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

Mobile Responsiveness

To ensure a great experience on mobile devices, you can add media queries to the CSS file to make the chatbot take up more of the screen on smaller devices.

/* Example: Full-screen chat on mobile */
@media screen and (max-width: 480px) {
    .popup-container {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }
    
    .popup-body, .iframe-container {
        height: 100vh;
    }
}

Showing/Hiding Interface Elements

The plugin includes a header and footer structure that is hidden by default (display: none). If you wish to add your own branding or a "Close" text button above the chatbot, you can enable these:

/* Example: Enabling the header */
.popup-header {
    display: block;
    background-color: #f8f9fa;
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

Applying Changes

1. Access your WordPress files via FTP or the Plugin Editor.
2. Navigate to wp-content/plugins/supervised-ai-bots/css/custom-popup-style.css.
3. Modify the styles as desired and save the file.
4. Clear your website and browser cache to see the changes reflected on the frontend.