Interface Styling (CSS)

To ensure the Supervised AI chatbot aligns with your website's branding, you can customize the visual interface by modifying the custom-popup-style.css file. This file controls the appearance of the floating launcher button and the chat window container.

Locating the Stylesheet

The stylesheet is located within the plugin directory: wp-content/plugins/supervised-ai-bots/custom-popup-style.css

Key UI Components

The interface is primarily composed of two elements: the Launcher Button (the circular icon used to open the chat) and the Popup Container (the window where the chatbot appears).

1. Customizing the Launcher Button

The launcher button is the entry point for your users. You can change its color, size, and position using the .circle-button class.

Change Background Color: Modify background-color to match your brand's primary color.
Adjust Position: Change bottom and right values to move the button (e.g., change right: 20px to left: 20px to move it to the bottom-left).

/* Example: Changing button to a brand green and moving it to the left */
.circle-button {
    background-color: #28a745; /* Brand Green */
    left: 20px;                /* Move to left side */
    right: auto;               /* Reset right property */
}

2. Customizing the Chat Window

The chat window's dimensions and border styling are controlled via the .popup-container and .popup-body classes.

Window Dimensions: Adjust the width and height to change how much space the bot occupies.
Border Radius: Modify border-radius to make the corners sharper or more rounded.

/* Example: Making the chat window taller and removing rounded corners */
.popup-container {
    height: 800px;
    width: 450px;
    border-radius: 0px; /* Square corners */
}

.popup-body {
    height: 800px; /* Ensure this matches the container height */
}

CSS Class Reference

Best Practices for Customization

Z-Index Management: The launcher is set to z-index: 9999 and the container to z-index: 1001. If your website's header or other elements overlap the chatbot, you may need to increase these values.
Mobile Responsiveness: By default, the width is set to 400px. For better mobile display, you can add a media query to adjust the width for smaller screens:

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

Hiding Elements

The plugin is designed to provide a clean, "headless" look. As such, the .popup-header and .popup-footer are hidden by default (display: none). If you wish to add a custom header title bar, you can change the display property to block and add your own background colors and padding.