Styling & CSS Reference

Customizing the Chatbot Appearance

The Supervised AI Bots plugin allows for extensive visual customization through its CSS file. By modifying custom-popup-style.css, you can ensure the chatbot launcher and window match your website's color palette and brand identity.

The Floating Launcher (Circle Button)

The launcher is the circular button that users click to open the chat. You can modify its size, color, and position using the .circle-button class.

Common Modifications:

/* Change the launcher color and size */
.circle-button {
    background-color: #2ecc71; /* Change to your brand color */
    width: 70px;               /* Default is 60px */
    height: 70px;              /* Default is 60px */
    line-height: 70px;         /* Match height to center the icon */
    bottom: 30px;              /* Adjust distance from bottom */
    right: 30px;               /* Adjust distance from right */
}

The Chat Container (Popup)

The chat container is the window that appears when the chatbot is active. The primary class for this is .popup-container.

Adjusting Dimensions and Radius:

.popup-container {
    width: 450px;           /* Default is 400px */
    height: 700px;          /* Default is 670px */
    border-radius: 20px;    /* Makes the corners more rounded */
    box-shadow: 0px 4px 20px rgba(0,0,0,0.15); /* Softer shadow */
}

Repositioning to the Left Side:

If you prefer the chatbot to appear on the bottom-left of the screen instead of the bottom-right:

.circle-button, .popup-container {
    right: auto;
    left: 20px;
}

CSS Class Reference

The following classes are available for targeting specific elements of the chatbot interface:

| Class Selector | Description | | :--- | :--- | | .circle-button | The floating toggle button used to open/close the chat. | | .popup-container | The main wrapper for the chatbot window. | | .popup-body | The internal container holding the chatbot content. | | .iframe-container | Specifically targets the wrapper around the Supervised AI iframe. | | .iframe-container iframe | Used to style the actual iframe (e.g., adding borders). |

Overriding Hidden Elements

By default, the plugin hides the internal header and footer to provide a seamless "full-window" experience for the Supervised AI interface. If your specific implementation requires showing these areas, you can override the display property:

/* Example: Enabling the header if custom content is added */
.popup-header {
    display: block;
    background-color: #f8f9fa;
    padding: 10px;
}

Responsive Design

To ensure the chatbot looks good on mobile devices, you can add media queries to your CSS. For example, to make the chatbot take up more screen width on small devices:

@media (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        height: 80vh; /* 80% of viewport height */
    }
}

Note: When making styling changes, ensure you clear your WordPress site cache and browser cache to see the updates reflected on the frontend.