UI & Styling (CSS)

UI & Styling (CSS)

The Supervised AI Bots plugin provides a sleek, floating chat interface that appears in the bottom-right corner of your website. You can customize the appearance of both the toggle button (Floating Action Button) and the chat window container using standard CSS.

Overview of UI Components

The user interface consists of two primary elements:

1. The Circle Button: A floating action button (FAB) that triggers the chat window.
2. The Popup Container: A responsive window that houses the chatbot iframe.

Customizing the Floating Action Button

By default, the button is a blue circle positioned 20px from the bottom and right edges of the screen. You can override the .circle-button class in your theme’s stylesheet or the WordPress Customizer to match your brand.

/* Example: Changing the button color and size */
.circle-button {
    background-color: #ff5733 !important; /* Change to your brand color */
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    bottom: 30px !important; /* Move higher from the bottom */
}

Customizing the Chat Window

The chat window is defined by the .popup-container class. It is designed to be tall and narrow by default, resembling a mobile chat interface.

| Property | Default Value | Description | | :--- | :--- | :--- | | width | 400px | The width of the chat window. | | height | 670px | The height of the chat window. | | bottom / right | 20px | The offset from the screen edges. | | z-index | 1001 | Ensures the window stays above most site content. |

To adjust the size of the chat window to better fit your site layout, use the following snippet:

/* Example: Making the chat window larger */
.popup-container {
    width: 500px !important;
    height: 80vh !important; /* Sets height to 80% of the viewport */
    border-radius: 15px !important; /* Rounder corners */
}

CSS Class Reference

You can target the following classes for deep customization:

• .circle-button: The clickable round launcher button.
• .popup-container: The main wrapper for the chat window.
• .popup-body: The internal container for the chatbot content.
• .iframe-container: The specific wrapper that handles the responsive iframe scaling.
• .iframe-container iframe: The actual Supervised AI chatbot embedded content.

Mobile Responsiveness

The plugin uses fixed positioning. If you wish to hide the chatbot on small mobile devices or change its scale, you can use media queries:

/* Example: Hide the chatbot on screens smaller than 480px */
@media only screen and (max-width: 480px) {
    .circle-button, .popup-container {
        display: none !important;
    }
}

Applying Styles

To apply these customizations:

1. Navigate to Appearance > Customize in your WordPress dashboard.
2. Open the Additional CSS section.
3. Paste your custom CSS rules and click Publish.