Popup UI Customization

Popup UI Customization

The Supervised AI Chatbot's appearance is controlled via the custom-popup-style.css file. By modifying the CSS classes, you can adjust the size, positioning, and visual styling of the chat window to match your website's brand.

Adjusting Container Dimensions

The chat popup is contained within the .popup-container class. You can modify the default height and width to ensure the chatbot fits your layout.

/* Example: Making the chat window taller and wider */
.popup-container {
    height: 750px;       /* Default: 670px */
    width: 450px;        /* Default: 400px */
    max-width: 90%;      /* Ensures responsiveness on smaller screens */
}

Modifying Position and Offsets

By default, the chatbot appears in the bottom-right corner. You can change its placement by adjusting the bottom, right, left, or top properties.

/* Example: Moving the popup to the bottom-left corner */
.popup-container, .circle-button {
    right: auto;
    left: 20px;
}

Customizing the Launcher Button

The .circle-button class styles the floating circular button used to open and close the chatbot. You can change the background color, size, and shadow here.

/* Example: Changing button color and size */
.circle-button {
    background-color: #28a745; /* Green theme */
    width: 70px;
    height: 70px;
    line-height: 70px;         /* Match height to center the icon */
}

Visual Styling: Shadows and Borders

To change the depth (shadow) or the roundness of the corners, modify the box-shadow and border-radius properties.

/* Example: Adding a softer shadow and sharper corners */
.popup-container {
    border-radius: 4px;        /* Less rounded corners */
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15); 
}

Managing Layering (z-index)

If the chatbot or the launcher button is being hidden by your website's header, footer, or other fixed elements, you may need to increase the z-index.

| Class | Default z-index | Purpose | | :--- | :--- | :--- | | .popup-container | 1001 | The main chat window layer. | | .circle-button | 9999 | The floating button (typically highest). |

/* Example: Ensuring the button stays above all other elements */
.circle-button {
    z-index: 99999;
}

Iframe Responsiveness

The chatbot content is loaded via an iframe inside the .iframe-container. While the height is typically inherited from the container, you can force specific behaviors:

.iframe-container {
    height: 100%; /* Occupy full height of the popup-container */
    border-radius: 10px; /* Match the popup-container radius */
}

Hiding Elements

The plugin includes header and footer sections within the popup that are hidden by default to provide a clean, "chat-only" look. If you wish to enable them for custom content, update the display property:

.popup-header {
    display: block; /* Default: none */
    background-color: #f8f9fa;
    padding: 10px;
}