CSS & Theming

The Supervised AI Chatbot is designed to be unobtrusive and blend with your website's existing design. While the plugin provides a default look and feel, you can easily override the styles to match your brand's color palette, typography, and layout requirements.

CSS Selectors

To customize the chatbot, target the following primary CSS classes in your theme’s stylesheet or via the Appearance > Customize > Additional CSS section in WordPress.

Common Customizations

1. Changing the Trigger Button Color

By default, the floating action button is blue (#007bff). You can change this to match your brand's primary color:

/* Change the background and text color of the chat button */
.circle-button {
    background-color: #e63946 !important; /* Your brand color */
    color: #ffffff !important;           /* Icon/Text color */
}

2. Adjusting the Position

If the chatbot overlaps with other elements (like a "Back to Top" button), you can move it to the left side of the screen or adjust the offset:

/* Move the chatbot and button to the bottom-left */
.circle-button, 
.popup-container {
    right: auto !important;
    left: 20px !important;
}

3. Resizing the Chat Window

You can modify the width and height of the popup window to better suit your site's layout. Note that the internal containers should be adjusted simultaneously to maintain alignment.

/* Increase the size of the chat window */
.popup-container {
    width: 450px !important;
    height: 750px !important;
}

.popup-body, 
.iframe-container {
    height: 750px !important;
}

4. Customizing the Shadow and Border Radius

To give the chatbot a flatter look or more pronounced shadow, use the following:

/* Soften the shadow and remove rounded corners */
.popup-container {
    border-radius: 0px !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.1) !important;
}

.circle-button {
    border-radius: 8px !important; /* Square-ish button */
}

Best Practices & Tips

Use of !important: Depending on when your theme's CSS loads, you may need to use the !important flag to ensure your custom styles override the plugin's default custom-popup-style.css.

Mobile Responsiveness: The chatbot is fixed-width by default (400px). For better mobile support, you may want to add a media query:

@media (max-width: 480px) {
    .popup-container {
        width: 90% !important;
        right: 5% !important;
        bottom: 80px !important;
    }
}

Z-Index: The chatbot uses a high z-index (9999 for the button and 1001 for the container) to stay above other content. If your theme's header or overlays are appearing on top of the chat, increase these values accordingly.