Customizing the Popup UI

Customizing the Popup UI

The Supervised AI Bots plugin allows you to customize the visual appearance of both the floating launch button and the chat window container. All styles are managed within the custom-popup-style.css file.

By modifying the CSS classes outlined below, you can align the chatbot interface with your website's branding.

The Floating Launch Button

The floating button is the circular icon users click to open the chat. It is controlled by the .circle-button class.

| Property | Description | Default Value | | :--- | :--- | :--- | | background-color | Changes the button's color. | #007bff (Blue) | | bottom / right | Adjusts the distance from the screen edge. | 20px | | width / height | Sets the size of the circular button. | 60px | | border-radius | Determines the roundness (50% for a circle). | 50% |

Example: Changing the button color and position

.circle-button {
    background-color: #28a745; /* Changes button to green */
    bottom: 30px;              /* Moves button slightly higher */
    right: 30px;               /* Moves button further from the right edge */
}

The Chat Container

The chat container is the window that pops up when the button is clicked. This is controlled by the .popup-container class.

• Dimensions: By default, the window is 400px wide and 670px high. You can adjust these to fit your site's layout.
• Shadows and Borders: Use box-shadow and border-radius to modify the depth and corner roundness.

Example: Making the chat window larger and more rounded

.popup-container {
    width: 450px;         /* Increased width */
    height: 750px;        /* Increased height */
    border-radius: 20px;  /* Softer corners */
    bottom: 100px;        /* Positions it above the button */
}

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

Adjusting Visibility

The plugin is designed to provide a clean, "widget-like" experience. Some elements are hidden by default to keep the focus on the Supervised AI interface.

• Headers and Footers: The classes .popup-header and .popup-footer are set to display: none;. If you wish to add a custom title bar, you must change this to display: block; and provide additional styling.
• Z-Index: The chat window has a z-index of 1001, and the button has 9999. If your website has sticky menus or other floating elements overlapping the chat, increase these values.

Mobile Responsiveness

To ensure the chatbot looks good on smaller screens, you can add media queries to your CSS.

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;      /* Window takes up most of the screen width */
        right: 5%;       /* Centers the window slightly */
        height: 80vh;    /* Caps height at 80% of the viewport */
    }
}

Applying Changes

To apply these customizations:

1. Open the wpai plugin folder in your WordPress installation.
2. Locate custom-popup-style.css.
3. Edit the file with your preferred CSS rules.
4. Clear your browser cache or WordPress optimization plugin cache to see the changes live.