Visual Customization

The Supervised AI Bots plugin is designed to be lightweight and unobtrusive. You can customize the appearance of the chat bubble (trigger button) and the chat window (popup container) by overriding the default CSS styles.

To apply these changes, you can add the following CSS snippets to your WordPress theme's Additional CSS section (found under Appearance > Customize) or by modifying the custom-popup-style.css file directly.

Customizing the Chat Bubble

The chat bubble is the circular button that appears at the bottom-right of your website. You can modify its color, size, and position using the .circle-button class.

/* Change the bubble color and size */
.circle-button {
    background-color: #28a745; /* Change to your brand color */
    width: 70px;               /* Default is 60px */
    height: 70px;
    line-height: 70px;         /* Match height to center the icon */
    bottom: 30px;              /* Distance from bottom */
    right: 30px;               /* Distance from right */
}

Adjusting the Chat Window Dimensions

By default, the chatbot window has a fixed height and a flexible width. You can adjust these values to ensure the chatbot fits perfectly within your site's layout.

/* Modify the popup container dimensions */
.popup-container {
    height: 600px;    /* Change the height of the window */
    width: 350px;     /* Change the default width */
    max-width: 90%;   /* Ensure responsiveness on smaller screens */
    bottom: 90px;     /* Position it above the chat bubble */
    border-radius: 15px; /* Round the corners further */
}

/* Ensure the iframe fills the adjusted container */
.popup-body, .iframe-container {
    height: 600px;    /* Must match the .popup-container height */
}

Modifying Borders and Shadows

To give the chatbot a more distinct look or to blend it with your site's theme, you can adjust the box-shadow and border properties.

/* Add a custom shadow or border to the chatbot popup */
.popup-container {
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2); /* Softer, larger shadow */
    border: 1px solid #ddd;                      /* Light border */
}

Hiding Elements

The plugin is configured by default to hide the popup header and footer to maximize the space for the chatbot interface. If you wish to show them or further hide elements, target these classes:

.popup-header: The top section of the popup (Hidden by default).
.popup-footer: The bottom section of the popup (Hidden by default).

CSS Class Reference

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