CSS Layout & Customization

CSS Layout & Customization

The Supervised AI Bots plugin provides a default floating chat interface. To match your website's branding, you can override the following CSS classes within your theme's stylesheet or via the WordPress "Additional CSS" customizer.

Key Styling Classes

The plugin's layout is primarily controlled by three main components: the launcher button, the chat container, and the iframe wrapper.

1. The Launcher Button (.circle-button)

This is the circular toggle button that appears in the bottom-right corner of the screen.

| Property | Default Value | Description | | :--- | :--- | :--- | | background-color | #007bff | The primary color of the launcher circle. | | width / height | 60px | The dimensions of the button. | | bottom / right | 20px | The offset distance from the edge of the screen. | | z-index | 9999 | Ensures the button stays above other page elements. |

2. The Chat Container (.popup-container)

This is the main window that houses the chatbot iframe.

| Property | Default Value | Description | | :--- | :--- | :--- | | width | 400px | The width of the chat window. | | height | 670px | The fixed height of the chat window. | | border-radius | 10px | The roundness of the window corners. | | box-shadow | 0px 0px 10px ... | The outer glow/shadow of the chat window. |

3. The Content Wrapper (.iframe-container)

This ensures the Supervised AI interface fills the available space within the popup. It is set to a fixed height of 670px by default to prevent layout shifts.

Customization Examples

To apply custom branding, add these snippets to your WordPress site.

Changing the Launcher Color and Position

If you want to move the button to the left side and change it to a brand-specific green:

/* Move launcher to the left and change color */
.circle-button {
    background-color: #28a745 !important;
    right: auto !important;
    left: 20px !important;
}

/* Ensure the chat window also opens on the left */
.popup-container {
    right: auto !important;
    left: 20px !important;
}

Adjusting Chat Window Size

If you need a larger interface for complex bots, you can expand the container dimensions:

/* Increase chat window size */
.popup-container {
    width: 500px !important;
    height: 800px !important;
}

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

Hiding the Launcher on Mobile

If you prefer to hide the floating bot on smaller screens:

@media (max-width: 600px) {
    .circle-button, 
    .popup-container {
        display: none !important;
    }
}

Important Notes

• Specificity: Because the plugin styles are loaded via a dedicated stylesheet, you may need to use the !important flag to override certain properties effectively.
• Internal Elements: The .popup-header and .popup-footer are set to display: none by default to provide a seamless "Supervised AI" full-frame experience. You can enable them via CSS if you wish to add custom headers or padding around the bot.