Styling & CSS Customization

The Supervised AI Bot plugin is designed with a clean, floating interface. You can customize the look and feel of both the launcher button and the chat window by adding custom CSS to your WordPress theme or via the WordPress Customizer (Appearance > Customize > Additional CSS).

Customizing the Launch Button

The launch button is the circular icon that appears in the corner of the screen. You can modify its size, background color, and icon appearance using the .circle-button class.

Example: Changing the button color and size

/* Change button to green and increase size */
.circle-button {
    background-color: #28a745; /* Change from default blue to green */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Should match height to center the icon */
    font-size: 30px;
}

Adjusting Chat Window Dimensions

The chat popup has a default width of 400px and a height of 670px. To ensure the chatbot content displays correctly, you should update the height across the container and the iframe wrapper.

Example: Making the chat window larger

/* Increase the width and height of the popup */
.popup-container {
    width: 500px;
    height: 800px;
    max-width: 90%; /* Ensures responsiveness on smaller screens */
}

/* Adjust the internal containers to match the new height */
.popup-body, 
.iframe-container {
    height: 800px;
}

Changing Position

By default, the chatbot is pinned to the bottom-right corner. You can move it to the bottom-left by targeting both the button and the container.

Example: Moving the bot to the left side

/* Move the launch button */
.circle-button {
    right: auto;
    left: 20px;
}

/* Move the chat window */
.popup-container {
    right: auto;
    left: 20px;
}

Customizing the Chat Window Border

You can add custom borders or modify the shadow of the chat window to better match your branding.

.popup-container {
    border: 2px solid #007bff;
    border-radius: 15px; /* Round the corners more */
    box-shadow: 0px 10px 25px rgba(0,0,0,0.2); /* Softer, deeper shadow */
}

CSS Class Reference

Use these selectors for precise targeting:

Note: When adjusting heights, ensure that .popup-container, .popup-body, and .iframe-container all share the same height value to prevent layout clipping or unwanted scrollbars.