CSS Customization

The Supervised AI Bots plugin provides a default look and feel for the chatbot launcher and the popup window. You can override these styles by adding custom CSS to your WordPress theme's style.css file or via the Appearance > Customize > Additional CSS section in your WordPress dashboard.

Targeting Specific Components

The following CSS classes are used to render the chatbot interface:

Customizing the Launcher Button

You can change the color, size, and position of the floating button. Use the !important flag to ensure your styles override the plugin's defaults if necessary.

/* Change button color and size */
.circle-button {
    background-color: #28a745 !important; /* Change to your brand color */
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    font-size: 30px !important;
}

/* Move the button to the bottom-left instead of bottom-right */
.circle-button {
    right: auto !important;
    left: 20px !important;
}

Adjusting Chat Window Dimensions

The default popup is optimized for most screens, but you can adjust the width and height to fit your specific design needs.

/* Adjust the width and height of the chatbot popup */
.popup-container {
    width: 450px !important;
    height: 750px !important;
    max-width: 90% !important; /* Ensures responsiveness on mobile */
}

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

Modifying Positioning and Z-Index

If the chatbot is overlapping with other site elements (like a "Back to Top" button or a sticky footer), you can adjust its offsets or stacking order.

/* Lift the popup higher from the bottom */
.popup-container {
    bottom: 100px !important;
}

/* Ensure the chatbot stays above all other theme elements */
.circle-button {
    z-index: 99999 !important;
}
.popup-container {
    z-index: 100000 !important;
}

Example: Left-Aligned Chatbot

If you prefer the chatbot to appear on the left side of the screen, use the following configuration:

/* Move Launcher to the left */
.circle-button {
    right: auto !important;
    left: 20px !important;
}

/* Move Popup window to the left */
.popup-container {
    right: auto !important;
    left: 20px !important;
}

Mobile Responsiveness

The plugin uses fixed pixel widths by default. To make the popup more mobile-friendly, you can use media queries:

@media (max-width: 600px) {
    .popup-container {
        width: 100% !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        height: 80vh !important;
    }
    
    .popup-body, 
    .iframe-container {
        height: 80vh !important;
    }
}