CSS & Visual Customization

The appearance of the Supervised AI Chatbot can be fully customized to align with your website's branding. Most visual properties, including dimensions, colors, and positioning, are controlled via the custom-popup-style.css file.

Adjusting Chat Window Dimensions

By default, the chatbot popup is configured with a fixed height and width optimized for most displays. You can modify these values within the .popup-container and .iframe-container classes.

To change the size of the chat window:

.popup-container {
    height: 600px;     /* Default: 670px */
    width: 350px;      /* Default: 400px */
    max-width: 90%;    /* Ensures responsiveness on smaller screens */
}

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

Customizing the Floating Trigger Button

The .circle-button class styles the floating action button (the icon users click to open the chat). You can change the background color, size, and icon color here.

.circle-button {
    background-color: #28a745; /* Change to your brand color */
    width: 70px;               /* Change button size */
    height: 70px;
    line-height: 70px;         /* Match height to center the icon vertically */
    color: #ffffff;            /* Icon/Text color */
    font-size: 28px;
}

Repositioning the Chatbot

If you want to move the chatbot from the bottom-right corner to another location (e.g., the bottom-left), update the positioning coordinates for both the container and the button.

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

.circle-button {
    bottom: 20px;
    right: auto;
    left: 20px;
}

Styling the Container (Borders & Shadows)

To modify the "look and feel" of the popup box, such as its corner roundness or the intensity of its shadow, target the .popup-container.

.popup-container {
    border-radius: 0px;                     /* Square corners */
    box-shadow: 0px 4px 20px rgba(0,0,0,0.5); /* Heavier shadow */
    border: 1px solid #dddddd;             /* Optional border */
}

Summary of Key Classes

Best Practices for Customization

Maintain Consistency: Ensure the height property in .popup-container, .popup-body, and .iframe-container remain identical to prevent layout shifts or unwanted scrollbars.
Z-Index: The floating button has a z-index of 9999 to ensure it stays above other site elements. If your site header or other overlays conflict, adjust this value accordingly.
Mobile Responsiveness: When increasing the width, it is recommended to use a max-width: 90vw or similar property to ensure the popup doesn't bleed off the screen on mobile devices.