Styling and Theming

The Supervised AI Bots plugin is designed to be lightweight, allowing you to easily match the chatbot's interface with your website’s branding. All visual elements are controlled via CSS classes that can be overridden in your theme's stylesheet or via the WordPress Customizer.

Main Layout Classes

The following CSS classes are the primary targets for styling:

Customizing the Launcher Button

The launcher button (the floating circle in the corner) can be styled to match your brand colors and positioning. By default, it is a blue circle located at the bottom-right of the screen.

/* Change the launcher button color and size */
.circle-button {
    background-color: #e67e22; /* Your brand color */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Should match height to center icon */
    bottom: 30px;
    right: 30px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}

/* Change the button hover state */
.circle-button:hover {
    background-color: #d35400;
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
}

Adjusting the Chat Window Dimensions

The chat window container has a default width of 400px and a height of 670px. You can adjust these values to better fit your site's layout.

/* Adjust the chatbot window size and border radius */
.popup-container {
    width: 450px;       /* Increase width */
    height: 600px;      /* Decrease height */
    bottom: 100px;      /* Position it higher above the button */
    border-radius: 20px; /* Softer corners */
    border: 1px solid #ddd;
}

/* Ensure the iframe container matches the new height */
.popup-body, 
.iframe-container {
    height: 600px;
}

Repositioning to the Left Side

If your website has other elements (like "Back to Top" buttons) on the right side, you can move the chatbot to the left side of the screen.

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

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

Mobile Responsiveness

To ensure a good user experience on smaller screens, you can add media queries to make the chatbot take up more screen real estate on mobile devices.

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        left: 5%;
        height: 80vh;
        bottom: 90px;
    }
    
    .popup-body, 
    .iframe-container {
        height: 80vh;
    }
}

How to Apply Custom Styles

You can apply these styles using two methods:

WordPress Customizer (Recommended): Navigate to Appearance > Customize > Additional CSS and paste your custom code there.
Child Theme: Add the styles to your child theme's style.css file.
Plugin File (Advanced): Modify css/custom-popup-style.css directly within the plugin folder. Note: Changes made here may be overwritten during plugin updates.

Note: The styles defined here affect the container and the launcher. The content inside the chatbot (colors, fonts, and messages) is managed through your Supervised AI dashboard.